/* ===== base.css ===== */ /* base.css — Design tokens, reset, typography primitives */ :root{ --ink:#0a0508; --ink-2:#140a10; --plum:#2a1024; --magenta:#c4258f; --ember:#ff6a2b; --gold:#ffb347; --violet:#7b3fe4; --paper:#f6eef4; --mute:#9d8494; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.035); --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ink);color:var(--paper);font-family:var(--body); line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased; } .wrap{width:min(1180px,92vw);margin:0 auto} section{position:relative;padding:120px 0} /* ===== animations.css ===== */ /* animations.css — 3D scroll-reveal states and keyframes */ /* ============ SCROLL REVEAL (3D) ============ ... Hidden state is scoped to .js-reveal, which js/reveal.js puts on . If JavaScript never runs (blocked, failed, or the page was opened over file://), that class is absent and every .reveal stays fully visible. Content must never depend on JS to be readable. */ .js-reveal .reveal{ opacity:0;transform:perspective(1200px) rotateX(14deg) translateY(56px) scale(.965); transform-origin:50% 100%; transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1); will-change:transform,opacity; } .js-reveal .reveal.in{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)} .js-reveal .reveal.tilt-l{transform:perspective(1200px) rotateY(-12deg) translateX(-40px) translateZ(-60px);transform-origin:100% 50%} .js-reveal .reveal.tilt-l.in{transform:none} .js-reveal .reveal.tilt-r{transform:perspective(1200px) rotateY(12deg) translateX(40px) translateZ(-60px);transform-origin:0 50%} .js-reveal .reveal.tilt-r.in{transform:none} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal, .js-reveal .reveal.tilt-l, .js-reveal .reveal.tilt-r{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ===== layout.css ===== */ /* layout.css — Header, nav, buttons, shared section heads */ /* ============ NAV ============ */ header{ position:fixed;top:0;left:0;right:0;z-index:100; padding:18px 0;transition:.4s cubic-bezier(.16,1,.3,1); } header.stuck{background:rgba(10,5,8,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:12px 0} .nav{display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:18px;text-decoration:none} .logo-img{height:30px;width:auto;display:block;transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s} .logo:hover .logo-img{transform:scale(1.05);filter:drop-shadow(0 0 12px rgba(196,37,143,.5))} .logo i{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--magenta));box-shadow:0 0 14px var(--magenta)} .logo span{color:var(--mute);font-weight:400;font-size:13px;letter-spacing:0} .menu{display:flex;gap:34px;list-style:none} .menu a{ color:var(--mute);text-decoration:none;font-size:14px;position:relative;padding:4px 0; transition:color .3s; } .menu a::after{ content:'';position:absolute;left:0;bottom:0;height:1px;width:0; background:linear-gradient(90deg,var(--ember),var(--magenta));transition:width .4s cubic-bezier(.16,1,.3,1); } .menu a:hover{color:var(--paper)} .menu a:hover::after{width:100%} .btn{ display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none; font-family:var(--body);font-weight:600;font-size:14px;border-radius:100px; padding:12px 24px;position:relative;overflow:hidden;transition:.45s cubic-bezier(.16,1,.3,1); } .btn-grad{ color:#1a0a12;background:linear-gradient(100deg,var(--gold),var(--ember) 45%,var(--magenta)); background-size:200% 100%;box-shadow:0 8px 30px -8px rgba(196,37,143,.6); } .btn-grad:hover{background-position:100% 0;transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px -10px rgba(255,106,43,.7)} .btn-ghost{color:var(--paper);border:1px solid var(--line);background:rgba(255,255,255,.04)} .btn-ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09);transform:translateY(-3px)} .btn i{transition:transform .4s cubic-bezier(.16,1,.3,1);font-style:normal} .btn:hover i{transform:translate(3px,-3px)} .burger{display:none;background:none;border:0;color:var(--paper);font-size:22px;cursor:pointer} /* ============ HERO ============ */ .hero{ min-height:100vh;display:flex;align-items:center;padding:150px 0 80px; background: radial-gradient(900px 520px at 78% 24%,rgba(123,63,228,.42),transparent 62%), radial-gradient(760px 460px at 88% 40%,rgba(196,37,143,.38),transparent 60%), radial-gradient(680px 380px at 12% 62%,rgba(255,106,43,.22),transparent 62%), linear-gradient(180deg,#160810,#0a0508 78%); overflow:hidden; } #mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.55} .hero .wrap{position:relative;z-index:2} .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute); border:1px solid var(--line);border-radius:100px;padding:7px 16px;margin-bottom:28px; background:rgba(255,255,255,.03); } .eyebrow b{width:5px;height:5px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} h1{ font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.94; font-size:clamp(44px,7.2vw,96px);max-width:15ch;margin-bottom:26px; } .grad{ background:linear-gradient(94deg,var(--gold),var(--ember) 38%,var(--magenta) 78%,var(--violet)); -webkit-background-clip:text;background-clip:text;color:transparent; } .lede{color:var(--mute);font-size:17px;max-width:46ch;margin-bottom:36px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:80px} .play{ width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--magenta)); display:grid;place-items:center;font-size:9px;color:#1a0a12; } .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:34px} .stat b{ display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em;line-height:1;margin-bottom:8px; background:linear-gradient(180deg,var(--paper),rgba(246,238,244,.35)); -webkit-background-clip:text;background-clip:text;color:transparent; } .stat span{font-size:12px;color:var(--mute);line-height:1.5;display:block;max-width:24ch} /* mobile menu panel */ .menu-panel{ position:fixed;inset:0;z-index:120;display:none; background:rgba(10,5,8,.96);backdrop-filter:blur(20px); padding:96px 28px 40px; } .menu-panel.open{display:block;animation:panelIn .4s cubic-bezier(.16,1,.3,1)} @keyframes panelIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} .menu-panel ul{list-style:none;display:grid;gap:6px} .menu-panel a{ display:block;text-decoration:none;color:var(--paper); font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em; padding:14px 0;border-bottom:1px solid var(--line);transition:.35s cubic-bezier(.16,1,.3,1); } .menu-panel a:hover,.menu-panel a:focus-visible{color:var(--ember);padding-left:10px} .menu-panel .btn{margin-top:28px;width:100%;justify-content:center} .menu-close{ position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%; border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--paper); font-size:18px;cursor:pointer;transition:.4s cubic-bezier(.16,1,.3,1); } .menu-close:hover{background:linear-gradient(135deg,var(--ember),var(--magenta));color:#1a0a12;transform:rotate(90deg)} body.no-scroll{overflow:hidden} /* ============ DROPDOWN NAV (multi-page) ============ */ .menu>li{position:relative} .menu .has-sub>a::after{content:'⌄';margin-left:6px;font-size:11px;opacity:.6;position:static} .submenu{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px); min-width:210px;padding:8px;margin-top:10px;border-radius:14px;list-style:none; background:rgba(16,8,14,.96);backdrop-filter:blur(20px);border:1px solid var(--line); box-shadow:0 24px 50px -24px rgba(0,0,0,.8); opacity:0;visibility:hidden;transition:.32s cubic-bezier(.16,1,.3,1);z-index:60; } .submenu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:12px} .menu .has-sub:hover .submenu, .menu .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .submenu li{display:block} .submenu a{ display:block;padding:9px 14px;border-radius:9px;font-size:13.5px;color:var(--mute); white-space:nowrap;transition:.28s cubic-bezier(.16,1,.3,1); } .submenu a::after{display:none} .submenu a:hover{color:var(--paper);background:rgba(255,255,255,.06);padding-left:18px} .menu a.active{color:var(--paper)} .menu a.active::after{width:100%} /* mobile: nested submenus in the panel */ .menu-panel .sub{list-style:none;margin:2px 0 10px;padding-left:14px;border-left:1px solid var(--line)} .menu-panel .sub a{font-size:16px;font-weight:400;color:var(--mute);padding:9px 0;border-bottom:0} .menu-panel .sub a:hover{color:var(--ember)} .menu-panel .grp{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(157,132,148,.6);padding:14px 0 4px;border-bottom:1px solid var(--line)} /* ===== hero.css ===== */ /* hero.css — Video hero: background, overlays, scanlines */ /* ============ VIDEO HERO ============ */ .vhero{min-height:100vh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden} .v-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .v-bg video,.v-bg .v-fallback{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover; } .v-bg video{z-index:1} .v-fallback{ z-index:0;width:100%;height:100%; transition:opacity .8s ease; background:radial-gradient(900px 520px at 72% 30%,rgba(123,63,228,.5),transparent 62%), radial-gradient(700px 420px at 30% 70%,rgba(255,106,43,.35),transparent 64%), linear-gradient(150deg,#2a1024,#0a0508); } /* once the video is actually playing, drop the gradient stand-in */ .video-ready .v-fallback{opacity:0} .v-overlay{ position:absolute;inset:0;z-index:1; background: linear-gradient(100deg,rgba(10,5,8,.94) 0%,rgba(10,5,8,.78) 42%,rgba(10,5,8,.42) 100%), linear-gradient(0deg,var(--ink) 2%,transparent 45%), radial-gradient(800px 400px at 78% 30%,rgba(196,37,143,.3),transparent 65%); } .v-scan{ position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px); } .vhero .wrap{position:relative;z-index:3} .v-split{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center} .v-mute{ position:absolute;bottom:28px;right:28px;z-index:4;width:42px;height:42px;border-radius:50%; border:1px solid var(--line);background:rgba(20,10,16,.7);backdrop-filter:blur(12px); color:var(--paper);cursor:pointer;font-size:14px;transition:.4s cubic-bezier(.16,1,.3,1); } .v-mute:hover{background:linear-gradient(135deg,var(--ember),var(--magenta));color:#1a0a12;transform:scale(1.1)} /* ===== forms.css ===== */ /* forms.css — Quote card + shared form fields */ /* quote form card */ .quote-card{ border:1px solid var(--line);border-radius:22px;padding:32px;position:relative;overflow:hidden; background:rgba(20,10,16,.72);backdrop-filter:blur(22px); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .5s; } .quote-card::before{ content:'';position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none; background:linear-gradient(140deg,rgba(255,179,71,.55),transparent 40%,rgba(196,37,143,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .5s; } .quote-card:hover{transform:translateY(-6px)} .quote-card:hover::before{opacity:1} .quote-card h3{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;margin-bottom:6px} .quote-card>p{color:var(--mute);font-size:13px;margin-bottom:22px} .field{margin-bottom:14px;position:relative} .field label{ display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(157,132,148,.8);margin-bottom:7px; } .field input,.field select,.field textarea{ width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px; padding:12px 14px;color:var(--paper);font-family:var(--body);font-size:13.5px; outline:none;transition:.35s cubic-bezier(.16,1,.3,1); } .field textarea{resize:vertical;min-height:110px} .field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 51%,calc(100% - 15px) 51%;background-size:5px 5px;background-repeat:no-repeat} .field select option{background:#140a10;color:var(--paper)} .field input::placeholder,.field textarea::placeholder{color:rgba(157,132,148,.55)} .field input:focus,.field select:focus,.field textarea:focus{ border-color:rgba(255,106,43,.6);background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(255,106,43,.11);transform:translateY(-1px); } .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .quote-card .btn{width:100%;justify-content:center;margin-top:6px} .form-note{font-size:11px;color:rgba(157,132,148,.75);text-align:center;margin-top:14px} .form-ok{ display:none;font-size:13px;color:var(--gold);text-align:center;margin-top:14px; padding:12px;border:1px solid rgba(255,179,71,.3);border-radius:12px;background:rgba(255,179,71,.07); } .form-ok.show{display:block;animation:pop .5s cubic-bezier(.16,1,.3,1)} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ===== sections.css ===== */ /* sections.css — Image-backed sections, services, split, process, work */ /* ============ SECTION HEADS ============ */ .tag{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ember);margin-bottom:20px} h2{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;font-size:clamp(32px,4.6vw,58px)} .head-split{display:grid;grid-template-columns:1.1fr .8fr;gap:60px;align-items:end;margin-bottom:56px} .head-split p{color:var(--mute);font-size:15px;max-width:42ch} /* ============ SERVICES GRID ============ */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .svc{ position:relative;border:1px solid var(--line);border-radius:18px;padding:26px 22px 30px; background:var(--card);overflow:hidden;transform-style:preserve-3d; display:flex;flex-direction:column;text-decoration:none;color:inherit; transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s; } .svc::before{ content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s; background:radial-gradient(400px 220px at var(--mx,50%) var(--my,0%),rgba(255,106,43,.16),transparent 65%); } .svc:hover{ transform:translateY(-10px) rotateX(6deg) rotateY(var(--ry,0deg)); border-color:rgba(255,106,43,.4);background:rgba(255,255,255,.06); box-shadow:0 30px 60px -30px rgba(196,37,143,.6); } .svc:hover::before{opacity:1} .svc-ico{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px; background:linear-gradient(140deg,rgba(255,106,43,.28),rgba(196,37,143,.28)); border:1px solid rgba(255,255,255,.12);margin-bottom:auto;transition:.5s cubic-bezier(.16,1,.3,1); color:var(--paper);font-variant-emoji:text;text-rendering:optimizeLegibility; } .svc:hover .svc-ico{transform:translateZ(30px) rotate(-8deg) scale(1.1)} .svc h3{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;margin:56px 0 10px;color:var(--paper);text-decoration:none;transition:color .4s} .svc:hover h3{color:var(--gold)} .svc p{font-size:12.5px;color:var(--mute);line-height:1.65;min-height:66px;text-decoration:none} .svc .num{font-family:var(--mono);font-size:10px;color:rgba(157,132,148,.45);text-decoration:none} /* ============ BANNER ============ */ .banner{ padding:130px 0;text-align:center;position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(255,106,43,.1),transparent),var(--ink-2); border-block:1px solid var(--line); } .banner::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(700px 300px at 50% 0,rgba(196,37,143,.28),transparent 70%); } .banner .wrap{position:relative;z-index:2} .banner p{color:var(--mute);max-width:52ch;margin:22px auto 0;font-size:15px} /* ============ WHY / SPLIT ============ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .frame{ position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line); aspect-ratio:4/3;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s; background:linear-gradient(150deg,#3a1230,#160810); } /* photo-backed frame: image scales gently on hover behind everything else */ .frame-img{background:#08060c;} .frame-img::before{ content:'';position:absolute;inset:0;z-index:0; background:url('../assets/why.jpg') center/cover no-repeat; transform:scale(1.05);transition:transform .9s cubic-bezier(.16,1,.3,1); } .frame-img:hover::before{transform:scale(1.13)} .frame-img .glowline{z-index:1} .frame:hover{transform:perspective(1000px) rotateY(-7deg) rotateX(4deg) scale(1.03);box-shadow:-30px 30px 70px -30px rgba(123,63,228,.7)} .frame .glowline{position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(0deg,rgba(8,6,12,.85),transparent)} .frame .figs{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;color:rgba(246,238,244,.5);letter-spacing:.2em} .chip{ position:absolute;border-radius:14px;padding:12px 16px;backdrop-filter:blur(14px); background:rgba(20,10,16,.78);border:1px solid var(--line);z-index:3; } .chip b{font-family:var(--display);font-weight:800;font-size:22px;display:block;line-height:1} .chip span{font-size:10px;color:var(--mute)} .chip.a{top:-14px;right:24px} .chip.a b{color:var(--ember)} .chip.b{bottom:-14px;left:24px} .chip.b b{color:var(--gold)} .checks{list-style:none;margin-top:30px;display:grid;gap:14px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mute);transition:.35s;padding:6px 10px;margin-left:-10px;border-radius:10px} .checks li:hover{color:var(--paper);background:rgba(255,255,255,.04);transform:translateX(6px)} .checks em{ flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;display:grid;place-items:center; font-size:9px;font-style:normal;color:#1a0a12;background:linear-gradient(135deg,var(--gold),var(--magenta)); } /* ============ PROCESS ============ */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .step{ border:1px solid var(--line);border-radius:18px;padding:26px 22px;background:var(--card); position:relative;overflow:hidden;transition:.5s cubic-bezier(.16,1,.3,1); } .step::before{ content:'';position:absolute;top:0;left:0;height:2px;width:0; background:linear-gradient(90deg,var(--ember),var(--magenta));transition:width .6s cubic-bezier(.16,1,.3,1); } .step:hover{transform:translateY(-8px) rotateX(5deg);background:rgba(255,255,255,.06);border-color:rgba(255,179,71,.35)} .step:hover::before{width:100%} .step b{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;display:block;margin-bottom:14px;transition:.4s} .step:hover b{transform:translateY(-2px)} .step:nth-child(1) b{color:var(--gold)}.step:nth-child(2) b{color:var(--ember)} .step:nth-child(3) b{color:var(--magenta)}.step:nth-child(4) b{color:var(--violet)} .step h4{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:9px} .step p{font-size:12.5px;color:var(--mute);line-height:1.6} /* ============ WORK ============ */ .work{display:grid;grid-template-columns:1.55fr 1fr;gap:16px} .work-col{display:grid;gap:16px} .case{ position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line); min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px; transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s;transform-style:preserve-3d; } .case::before{content:'';position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s;z-index:0} .case::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,5,8,.94) 6%,rgba(10,5,8,.15) 62%);z-index:1} .case>*{position:relative;z-index:2} .case:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 40px 80px -40px rgba(196,37,143,.75);border-color:rgba(255,106,43,.4)} .case:hover::before{transform:scale(1.09);filter:saturate(1.3)} .c1::before{background:radial-gradient(600px 340px at 30% 30%,rgba(123,63,228,.6),transparent 70%),linear-gradient(140deg,#2a1a4a,#10060e)} .c2::before{background:radial-gradient(400px 300px at 60% 35%,rgba(255,106,43,.65),transparent 68%),linear-gradient(150deg,#43121c,#12060a)} .c3::before{background:radial-gradient(420px 300px at 40% 40%,rgba(196,37,143,.5),transparent 70%),linear-gradient(160deg,#33122c,#100610)} .c4::before{background:radial-gradient(560px 320px at 55% 30%,rgba(255,179,71,.45),transparent 68%),linear-gradient(140deg,#3d2415,#100a08)} .pill{ display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.18); background:rgba(10,5,8,.6);backdrop-filter:blur(10px);margin-bottom:14px;width:max-content; } .case h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;margin-bottom:10px;max-width:26ch} .case p{font-size:12.5px;color:var(--mute);max-width:44ch;line-height:1.6} .case .go{ margin-top:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;font-size:12px;transition:.45s cubic-bezier(.16,1,.3,1); } .case:hover .go{background:linear-gradient(135deg,var(--ember),var(--magenta));color:#1a0a12;border-color:transparent;transform:rotate(45deg) scale(1.12)} .c2,.c3{min-height:220px} /* ============ IMAGE SECTIONS w/ OVERLAY ============ */ .img-section{position:relative;overflow:hidden;background:var(--ink-2)} /* The bg layer is deliberately taller than its section (top/bottom -15%) so it can be translated vertically for parallax without ever exposing an edge. --py is the live parallax offset (set by js/parallax.js); --z is the zoom-in-on-enter scale. Both compose in one transform. */ .img-bg{ position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:0; background-size:cover;background-position:center; --py:0px;--z:1.12; transform:translate3d(0,var(--py),0) scale(var(--z)); transition:--z 1.4s cubic-bezier(.16,1,.3,1); will-change:transform; } .img-section.in-view .img-bg{--z:1} /* fallback for browsers that can't transition custom props: still zooms */ @supports not (transition:--z 1s){ .img-bg{transition:transform 1.4s cubic-bezier(.16,1,.3,1)} .img-section.in-view .img-bg{transform:translate3d(0,var(--py),0) scale(1)} } .img-ov{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(10,5,8,.9),rgba(10,5,8,.72) 45%,rgba(10,5,8,.95)), radial-gradient(700px 340px at 50% 40%,rgba(196,37,143,.3),transparent 68%); } .img-ov.left{background:linear-gradient(96deg,rgba(10,5,8,.96) 12%,rgba(10,5,8,.7) 52%,rgba(10,5,8,.3) 100%),radial-gradient(600px 300px at 80% 40%,rgba(123,63,228,.32),transparent 66%)} .img-noise{ position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } .img-section .wrap{position:relative;z-index:3} /* stat band over image */ .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px} .metric{ border:1px solid var(--line);border-radius:16px;padding:24px 20px; background:rgba(20,10,16,.55);backdrop-filter:blur(14px); transition:.5s cubic-bezier(.16,1,.3,1); } .metric:hover{transform:translateY(-8px) rotateX(6deg);border-color:rgba(255,179,71,.4);background:rgba(20,10,16,.8)} .metric b{display:block;font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;margin-bottom:8px} .metric:nth-child(1) b{color:var(--gold)}.metric:nth-child(2) b{color:var(--ember)} .metric:nth-child(3) b{color:var(--magenta)}.metric:nth-child(4) b{color:var(--violet)} .metric span{font-size:12px;color:var(--mute);line-height:1.5} /* Gradient stand-ins for the section background images. To use real photos instead, delete the rule you're replacing and set: .bg-office{background-image:url('office.jpg')} */ .bg-office{ background-image: radial-gradient(700px 420px at 22% 30%,rgba(123,63,228,.5),transparent 64%), radial-gradient(620px 380px at 78% 62%,rgba(196,37,143,.42),transparent 66%), linear-gradient(145deg,#2a1024,#0d0510); } /* Real photo, tinted so the overlaid heading stays legible. Replace assets/team.jpg with your own wide, fairly dark image to swap it out. */ .bg-team{ background-image: radial-gradient(760px 440px at 30% 38%,rgba(255,106,43,.22),transparent 64%), radial-gradient(600px 360px at 74% 66%,rgba(196,37,143,.2),transparent 66%), linear-gradient(150deg,rgba(20,8,14,.62),rgba(10,5,8,.72)), url('../assets/team.jpg'); } .bg-workshop{ background-image: radial-gradient(720px 420px at 68% 34%,rgba(123,63,228,.52),transparent 64%), radial-gradient(560px 340px at 24% 70%,rgba(255,179,71,.28),transparent 66%), linear-gradient(140deg,#1d1240,#0a0610); } .bg-desk{ background-image: radial-gradient(700px 400px at 42% 32%,rgba(196,37,143,.46),transparent 64%), radial-gradient(600px 360px at 80% 70%,rgba(255,106,43,.34),transparent 66%), linear-gradient(155deg,#301028,#0b0509); } /* ===== contact.css ===== */ /* contact.css — Contact section, info list, chip multi-select */ /* ============ CONTACT ============ */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start} .c-info h2{margin-bottom:20px} .c-info>p{color:var(--mute);font-size:15px;max-width:40ch;margin-bottom:36px} .c-list{list-style:none;display:grid;gap:2px;margin-bottom:36px} .c-list li{border-top:1px solid var(--line);padding:18px 12px 18px 0;transition:.4s cubic-bezier(.16,1,.3,1);border-radius:0 12px 12px 0} .c-list li:last-child{border-bottom:1px solid var(--line)} .c-list li:hover{background:rgba(255,255,255,.04);padding-left:14px;padding-right:0} .c-list h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(157,132,148,.8);margin-bottom:6px} .c-list a,.c-list p{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--paper);text-decoration:none;transition:.3s} .c-list a:hover{color:var(--ember)} .c-hours{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--mute)} .c-hours i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2.4s infinite;font-style:normal} .contact-form{ border:1px solid var(--line);border-radius:24px;padding:38px;background:var(--card); position:relative;overflow:hidden; } .contact-form::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(500px 260px at 100% 0,rgba(196,37,143,.14),transparent 66%); } .contact-form form{position:relative;z-index:2} .contact-form h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;margin-bottom:8px;position:relative;z-index:2} .contact-form>p{color:var(--mute);font-size:13.5px;margin-bottom:26px;position:relative;z-index:2} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px} .chips input{position:absolute;opacity:0;pointer-events:none} .chips label{ cursor:pointer;font-size:12.5px;padding:9px 16px;border-radius:100px;border:1px solid var(--line); color:var(--mute);background:rgba(255,255,255,.03);transition:.35s cubic-bezier(.16,1,.3,1); font-family:var(--body);letter-spacing:0;text-transform:none;display:inline-block;margin:0; } .chips label:hover{border-color:rgba(255,255,255,.28);color:var(--paper);transform:translateY(-2px)} .chips input:checked+label{ color:#1a0a12;border-color:transparent;font-weight:600; background:linear-gradient(100deg,var(--gold),var(--ember) 55%,var(--magenta)); box-shadow:0 8px 22px -8px rgba(196,37,143,.7); } .chips input:focus-visible+label{outline:2px solid var(--ember);outline-offset:3px} /* ===== components.css ===== */ /* components.css — Marquee, testimonials, CTA band */ /* ============ MARQUEE ============ */ .marquee-wrap{padding:52px 0;border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden} .mq-label{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(157,132,148,.65);margin-bottom:26px} .marquee{display:flex;gap:64px;width:max-content;animation:slide 34s linear infinite} .marquee:hover{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .marquee p{ font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em; color:rgba(246,238,244,.22);white-space:nowrap;transition:color .35s;cursor:default; } .marquee p:hover{color:var(--paper)} /* ============ TESTIMONIALS ============ */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .quote{ border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card); transition:.55s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column; } .quote:hover{transform:translateY(-10px) rotateX(5deg);border-color:rgba(196,37,143,.4);box-shadow:0 34px 66px -34px rgba(123,63,228,.65)} .q-img{height:180px;position:relative;overflow:hidden} .q-img div{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1)} .quote:hover .q-img div{transform:scale(1.1)} .quote:nth-child(1) .q-img div{background:radial-gradient(300px 220px at 50% 35%,rgba(255,106,43,.55),transparent 70%),linear-gradient(150deg,#4a1a20,#150a0c)} .quote:nth-child(2) .q-img div{background:radial-gradient(300px 220px at 50% 35%,rgba(123,63,228,.5),transparent 70%),linear-gradient(150deg,#241640,#0d0812)} .quote:nth-child(3) .q-img div{background:radial-gradient(300px 220px at 50% 35%,rgba(255,179,71,.5),transparent 70%),linear-gradient(150deg,#43301a,#120c07)} .q-body{padding:24px;display:flex;flex-direction:column;flex:1} .q-body p{font-size:14px;line-height:1.7;margin-bottom:20px;flex:1} .q-body b{font-family:var(--display);font-weight:600;font-size:13px;display:block} .q-body span{font-size:11px;color:var(--mute)} /* ============ CTA ============ */ .cta-band{padding:0 0 120px} .cta-box{ position:relative;border-radius:26px;padding:80px 60px;overflow:hidden; background:linear-gradient(115deg,var(--violet),var(--magenta) 32%,var(--ember) 66%,var(--gold)); background-size:220% 220%;animation:drift 14s ease infinite; } @keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .cta-box::after{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 100%,rgba(10,5,8,.4),transparent 70%)} .cta-box>*{position:relative;z-index:2} .cta-box .tag{color:rgba(26,10,18,.7)} .cta-box h2{color:#1a0a12;max-width:18ch;margin-bottom:20px} .cta-box p{color:rgba(26,10,18,.78);max-width:48ch;margin-bottom:32px;font-size:15px;font-weight:500} .cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .btn-dark{background:#140a10;color:var(--paper)} .btn-dark:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px -12px rgba(0,0,0,.6)} .cta-row a.mail{color:#1a0a12;font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(26,10,18,.35);padding-bottom:2px;transition:.3s} .cta-row a.mail:hover{border-color:#1a0a12} /* ===== footer.css ===== */ /* footer.css — Advanced footer: aurora, wordmark, link matrix, status strip */ /* ============ FOOTER ============ */ footer{ position:relative;overflow:hidden;border-top:1px solid var(--line); background:linear-gradient(180deg,#100610,#060305); } .f-aurora{ position:absolute;inset:-40% -10% auto -10%;height:120%;pointer-events:none; background: radial-gradient(600px 300px at 20% 40%,rgba(123,63,228,.28),transparent 65%), radial-gradient(560px 280px at 72% 30%,rgba(196,37,143,.24),transparent 65%), radial-gradient(500px 260px at 48% 70%,rgba(255,106,43,.16),transparent 68%); filter:blur(10px);animation:drift 18s ease infinite;background-size:180% 180%; } .f-grid-lines{ position:absolute;inset:0;pointer-events:none;opacity:.4; background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:calc(100%/6) 100%; -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); } footer .wrap{position:relative;z-index:2} .f-top{padding:96px 0 64px;border-bottom:1px solid var(--line)} .f-word{ font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.86; font-size:clamp(56px,13vw,190px);margin-bottom:10px;user-select:none; background:linear-gradient(96deg,var(--gold),var(--ember) 30%,var(--magenta) 62%,var(--violet)); -webkit-background-clip:text;background-clip:text;color:transparent; transition:letter-spacing .8s cubic-bezier(.16,1,.3,1),filter .6s; } .f-word:hover{letter-spacing:-.02em;filter:brightness(1.25) saturate(1.2)} .f-word-sub{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .f-mid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;padding:64px 0} .f-brand p{color:var(--mute);font-size:13.5px;max-width:34ch;margin:18px 0 26px} .f-sub{display:flex;border:1px solid var(--line);border-radius:100px;padding:5px 5px 5px 20px;max-width:330px;transition:.4s;background:rgba(255,255,255,.03)} .f-sub:focus-within{border-color:rgba(255,106,43,.55);box-shadow:0 0 0 4px rgba(255,106,43,.1)} .f-sub input{flex:1;background:none;border:0;color:var(--paper);font-family:var(--body);font-size:13px;outline:none} .f-sub input::placeholder{color:rgba(157,132,148,.7)} .f-sub button{border:0;cursor:pointer;border-radius:100px;padding:10px 18px;font-family:var(--body);font-weight:600;font-size:12.5px;color:#1a0a12;background:linear-gradient(100deg,var(--gold),var(--ember),var(--magenta));background-size:200% 100%;transition:.4s} .f-sub button:hover{background-position:100% 0;transform:scale(1.05)} .f-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(157,132,148,.75);margin-bottom:20px} .f-col ul{list-style:none;display:grid;gap:12px} .f-col a{ color:var(--paper);text-decoration:none;font-size:13.5px;display:inline-flex;align-items:center;gap:7px; opacity:.72;transition:.35s cubic-bezier(.16,1,.3,1); } .f-col a::before{content:'';width:0;height:1px;background:linear-gradient(90deg,var(--ember),var(--magenta));transition:width .35s} .f-col a:hover{opacity:1;transform:translateX(4px)} .f-col a:hover::before{width:12px} .f-col .dot{width:5px;height:5px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember)} .f-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:56px} .f-card{ border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--card); transition:.5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden; } .f-card::after{ content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s; background:radial-gradient(320px 160px at var(--mx,50%) var(--my,50%),rgba(196,37,143,.18),transparent 70%); } .f-card:hover{transform:translateY(-6px) rotateX(6deg);border-color:rgba(196,37,143,.4);background:rgba(255,255,255,.06)} .f-card:hover::after{opacity:1} .f-card span{position:relative;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:10px} .f-card b{position:relative;z-index:2;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;display:block} .f-card small{position:relative;z-index:2;color:var(--mute);font-size:12px;display:block;margin-top:6px} .f-bottom{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding:26px 0 34px;border-top:1px solid var(--line); } .f-bottom p,.f-bottom a{font-size:12px;color:var(--mute);text-decoration:none;transition:color .3s} .f-bottom a:hover{color:var(--paper)} .f-legal{display:flex;gap:24px;flex-wrap:wrap} .socials{display:flex;gap:10px} .socials a{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center; font-size:11px;font-family:var(--mono);color:var(--mute);text-decoration:none; transition:.45s cubic-bezier(.16,1,.3,1); } .socials a:hover{color:#1a0a12;background:linear-gradient(135deg,var(--ember),var(--magenta));border-color:transparent;transform:translateY(-4px) rotate(-8deg)} .to-top{ position:fixed;right:22px;bottom:22px;z-index:90;width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:rgba(20,10,16,.85);backdrop-filter:blur(12px); color:var(--paper);cursor:pointer;font-size:14px;opacity:0;pointer-events:none; transition:.45s cubic-bezier(.16,1,.3,1); } .to-top.show{opacity:1;pointer-events:auto} .to-top:hover{background:linear-gradient(135deg,var(--ember),var(--magenta));color:#1a0a12;transform:translateY(-4px)} :focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px} /* ===== pages.css ===== */ /* pages.css — shared styles for inner pages (page hero, prose, cards, tables) */ /* page hero — compact banner under the nav */ .page-hero{ position:relative;overflow:hidden;padding:170px 0 90px; background: radial-gradient(760px 420px at 78% 20%,rgba(123,63,228,.34),transparent 62%), radial-gradient(620px 360px at 12% 60%,rgba(255,106,43,.2),transparent 62%), linear-gradient(180deg,#160810,#0a0508 82%); } .page-hero .wrap{position:relative;z-index:2} .page-hero .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:18px} .page-hero .crumb a{color:var(--mute);text-decoration:none;transition:color .3s} .page-hero .crumb a:hover{color:var(--ember)} .page-hero h1{font-size:clamp(38px,6vw,72px);max-width:16ch;margin-bottom:20px} .page-hero p{color:var(--mute);font-size:17px;max-width:52ch} /* generic content section */ .prose-section{padding:90px 0} .prose{max-width:760px;margin:0 auto} .prose h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 20px} .prose h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;margin:36px 0 12px} .prose p{color:var(--mute);font-size:15.5px;margin-bottom:18px;line-height:1.75} .prose ul{list-style:none;margin:18px 0 26px;display:grid;gap:12px} .prose ul li{display:flex;gap:12px;align-items:flex-start;color:var(--mute);font-size:15px} .prose ul li em{flex:none;width:18px;height:18px;border-radius:50%;margin-top:3px;display:grid;place-items:center;font-size:9px;font-style:normal;color:#1a0a12;background:linear-gradient(135deg,var(--gold),var(--magenta))} /* two-column feature split */ .feature-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1100px;margin:0 auto} .feature-split .fs-media{aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--line);position:relative;background:linear-gradient(150deg,#2a1024,#0d0510)} .feature-split .fs-media::after{content:'';position:absolute;inset:0;background:radial-gradient(400px 240px at 40% 40%,rgba(196,37,143,.4),transparent 70%)} /* step / process list */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} .flow .step{border:1px solid var(--line);border-radius:16px;padding:24px 20px;background:var(--card);transition:.5s cubic-bezier(.16,1,.3,1)} .flow .step:hover{transform:translateY(-6px);border-color:rgba(255,179,71,.35);background:rgba(255,255,255,.05)} .flow .step b{font-family:var(--display);font-weight:800;font-size:26px;color:var(--ember);display:block;margin-bottom:10px} .flow .step h4{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:8px} .flow .step p{font-size:12.5px;color:var(--mute);line-height:1.6} /* benefit grid */ .bene{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px} .bene .b-card{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:var(--card);transition:.5s cubic-bezier(.16,1,.3,1)} .bene .b-card:hover{transform:translateY(-8px) rotateX(5deg);border-color:rgba(196,37,143,.35);background:rgba(255,255,255,.05)} .bene .b-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:linear-gradient(140deg,rgba(255,106,43,.28),rgba(196,37,143,.28));border:1px solid rgba(255,255,255,.12);margin-bottom:16px} .bene .b-card h4{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:9px} .bene .b-card p{font-size:13px;color:var(--mute);line-height:1.6} /* pricing */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1050px;margin:0 auto} .price-card{position:relative;border:1px solid var(--line);border-radius:22px;padding:34px 28px;background:var(--card);transition:.5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column} .price-card:hover{transform:translateY(-10px);border-color:rgba(255,255,255,.25);box-shadow:0 34px 70px -34px rgba(196,37,143,.55)} .price-card.featured{border-color:transparent;background:linear-gradient(160deg,rgba(196,37,143,.16),rgba(123,63,228,.1)),var(--card)} .price-card.featured::before{content:'Most popular';position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#1a0a12;background:linear-gradient(100deg,var(--gold),var(--ember),var(--magenta));padding:5px 14px;border-radius:100px} .price-card .p-name{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .price-card .p-price{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1;margin-bottom:6px} .price-card .p-price small{font-size:14px;color:var(--mute);font-weight:400} .price-card .p-desc{font-size:13px;color:var(--mute);margin-bottom:24px} .price-card ul{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1} .price-card ul li{display:flex;gap:10px;font-size:13.5px;color:var(--paper)} .price-card ul li em{flex:none;color:var(--gold);font-style:normal} .price-card .btn{width:100%;justify-content:center} /* blog listing */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .post{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);transition:.5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column} .post:hover{transform:translateY(-8px);border-color:rgba(196,37,143,.35);box-shadow:0 30px 60px -30px rgba(123,63,228,.5)} .post .p-thumb{height:170px;position:relative;overflow:hidden} .post .p-thumb div{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1)} .post:hover .p-thumb div{transform:scale(1.08)} .post:nth-child(3n+1) .p-thumb div{background:radial-gradient(300px 200px at 50% 40%,rgba(255,106,43,.5),transparent 70%),linear-gradient(150deg,#3a1618,#100a0c)} .post:nth-child(3n+2) .p-thumb div{background:radial-gradient(300px 200px at 50% 40%,rgba(123,63,228,.5),transparent 70%),linear-gradient(150deg,#221540,#0c0812)} .post:nth-child(3n) .p-thumb div{background:radial-gradient(300px 200px at 50% 40%,rgba(255,179,71,.45),transparent 70%),linear-gradient(150deg,#3a2a16,#100c07)} .post .p-body{padding:22px;display:flex;flex-direction:column;flex:1} .post .p-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:10px} .post h3{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:10px;line-height:1.3} .post p{font-size:13px;color:var(--mute);line-height:1.6;flex:1} .post .p-meta{font-size:11px;color:var(--mute);margin-top:16px} /* contact page split */ .contact-page{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} .map-embed{margin-top:30px;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:linear-gradient(150deg,#241228,#0c0710);position:relative;display:grid;place-items:center} .map-embed span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} @media(max-width:1000px){ .feature-split,.contact-page{grid-template-columns:1fr;gap:40px} .flow,.bene,.price-grid,.blog-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .flow,.bene,.price-grid,.blog-grid{grid-template-columns:1fr} .page-hero{padding:140px 0 70px} } /* ===== responsive.css ===== */ /* responsive.css — Breakpoints — must load last */ /* ============ RESPONSIVE ============ */ @media(max-width:1000px){ .grid-4,.steps{grid-template-columns:repeat(2,1fr)} .f-mid{grid-template-columns:1fr 1fr;gap:40px} .work{grid-template-columns:1fr} .split,.v-split,.contact-grid{grid-template-columns:1fr;gap:44px} .metric-row{grid-template-columns:1fr 1fr} .head-split{grid-template-columns:1fr;gap:24px;align-items:start} } @media(max-width:720px){ section{padding:80px 0} .menu{display:none} .burger{display:block} .stats{grid-template-columns:1fr 1fr;gap:26px} .grid-4,.steps,.quotes,.f-strip{grid-template-columns:1fr} .f-mid{grid-template-columns:1fr} .cta-box{padding:52px 28px} .nav .btn-grad{display:none} .metric-row{grid-template-columns:1fr;gap:12px} .field-row{grid-template-columns:1fr} .quote-card,.contact-form{padding:26px} .vhero{padding:120px 0 70px} } /* ===== React app additions ===== */ /* JS reveals gated so content is visible if JS fails (SSR-less SPA still needs root JS, but keep parity) */ .reveal{opacity:0;transform:perspective(1200px) rotateX(14deg) translateY(56px) scale(.965);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);will-change:transform,opacity} .reveal.in{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)} .reveal.tilt-l{transform:perspective(1200px) rotateY(-12deg) translateX(-40px) translateZ(-60px);transform-origin:100% 50%} .reveal.tilt-l.in{transform:none} .reveal.tilt-r{transform:perspective(1200px) rotateY(12deg) translateX(40px) translateZ(-60px);transform-origin:0 50%} .reveal.tilt-r.in{transform:none} @media (prefers-reduced-motion:reduce){.reveal,.reveal.tilt-l,.reveal.tilt-r{opacity:1;transform:none;transition:none}} /* loading spinner */ .loading{min-height:60vh;display:grid;place-items:center} .spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ember);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* contact chips as React toggle (label.on instead of :checked) */ .chips label.on{color:#1a0a12;border-color:transparent;font-weight:600;background:linear-gradient(100deg,var(--gold),var(--ember) 55%,var(--magenta));box-shadow:0 8px 22px -8px rgba(196,37,143,.7)}