/* ============================================================ Naylalabs — shared styles (Yön B · Motion Dark) Used by: Naylalabs B.html and case/*.html ============================================================ */ :root{ --bg:#0A0A0B; --bg-2:#101012; --card:#141416; --card-2:#19191c; --text:#F5F3EE; --muted:#9A968D; --muted-2:#7A766F; /* keeps ≥4.5:1 on --bg/--card for small mono labels */ --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --orange:#F74516; --orange-2:#FF6A38; --disp:"Space Grotesk",sans-serif; --mono:"JetBrains Mono",monospace; --maxw:1320px; --pad:clamp(20px,5vw,72px); } *{margin:0;padding:0;box-sizing:border-box} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* NOTE: never set overflow-x on — it silently disables scroll-snap in Chromium. Horizontal-overflow protection lives on body (overflow-x:hidden) + per-component fixes. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} body{font-family:var(--disp);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--orange);color:#fff} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2} .scrollbar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--orange),var(--orange-2));width:0;z-index:99} /* ---------- NAV ---------- */ header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(10,10,11,.6);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px;letter-spacing:-.035em} .brand img{width:32px;height:32px;border-radius:8px;display:block} .brand .logolab{color:var(--orange)} .navlinks{display:flex;gap:32px;align-items:center} .navlinks a{font-family:var(--mono);font-size:12.5px;color:var(--muted);transition:color .2s;position:relative;white-space:nowrap} .navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--orange);transition:width .25s} .navlinks a:hover{color:var(--text)}.navlinks a:hover::after{width:100%} .navctrl{display:flex;align-items:center;gap:10px} .toggle{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:11px} .toggle button{background:transparent;border:0;padding:7px 12px;cursor:pointer;color:var(--muted);font-family:inherit;font-size:inherit;letter-spacing:.06em;transition:.18s} .toggle button.on{background:var(--text);color:var(--bg)} .btn{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;border:0;cursor:pointer;transition:transform .18s,box-shadow .18s;font-family:var(--disp);white-space:nowrap} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -8px rgba(247,69,22,.75)} .btn .arr{transition:transform .2s}.btn:hover .arr{transform:translate(3px,-3px)} .btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)} .btn--ghost:hover{background:rgba(255,255,255,.06);box-shadow:none} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} html.show-all .reveal{opacity:1!important;transform:none!important;transition:none!important} html.show-all *{transition-duration:0s!important} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee__track,.glow,.orb,.pin__pulse{animation:none!important}} /* ---------- SECTION META ---------- */ .smeta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding:22px 0} .smeta span:not(.ln){white-space:nowrap} .smeta .num{color:var(--orange)} .smeta .ln{flex:1;height:1px;background:var(--line)} /* ---------- HERO ---------- */ .hero{position:relative;padding:clamp(48px,9vw,120px) 0 0;overflow:hidden} .glow{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);pointer-events:none} .glow.g1{width:60vw;height:60vw;max-width:780px;max-height:780px;background:radial-gradient(circle,rgba(247,69,22,.55),transparent 62%);top:-22%;right:-8%;animation:float1 14s ease-in-out infinite} .glow.g2{width:40vw;height:40vw;max-width:520px;max-height:520px;background:radial-gradient(circle,rgba(255,106,56,.28),transparent 65%);bottom:-30%;left:-10%;animation:float2 18s ease-in-out infinite} @keyframes float1{50%{transform:translate(-30px,40px) scale(1.08)}} @keyframes float2{50%{transform:translate(40px,-30px) scale(1.1)}} .hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:8px 15px;border-radius:999px;margin-bottom:34px;white-space:nowrap} .hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px 2px var(--orange)} h1.hero__h{font-size:clamp(46px,9.2vw,138px);line-height:.92;letter-spacing:-.04em;font-weight:600;max-width:15ch;text-wrap:balance} h1.hero__h .o{color:var(--orange)} h1.hero__h .stroke{color:transparent;-webkit-text-stroke:1.4px var(--text);text-stroke:1.4px var(--text)} .hero__row{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end;justify-content:space-between;margin-top:40px} .hero__sub{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--muted);max-width:48ch} .hero__cta{display:flex;gap:12px;flex-wrap:wrap} /* ---------- HERO ALT: çizim masası (dot grid + crosshair + decode) ---------- */ #heroGrid{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:0;-webkit-mask-image:linear-gradient(#000 58%,transparent 97%);mask-image:linear-gradient(#000 58%,transparent 97%)} html.hero-alt .hero .glcanvas{display:none} html.hero-alt .hero .glow{display:none!important} html.hero-alt #heroGrid{display:block} html.hero-alt .hero__h .stw{overflow:visible} html.hero-alt .hero__h .stwi{transform:none!important;transition:none!important} .hcross{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s} .hcross i{position:absolute;display:block} .hcross .hxv{top:0;bottom:0;left:0;width:1px;background:rgba(255,255,255,.07)} .hcross .hxh{left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.07)} .hcross .hxy{position:absolute;top:0;left:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-2);white-space:nowrap} .hcross .hxy b{color:var(--orange);font-weight:400} @media(pointer:coarse){.hcross{display:none}} /* ---------- MARQUEE ---------- */ .marquee{margin-top:clamp(54px,7vw,86px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative;z-index:2;background:rgba(255,255,255,.015)} .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)} .marquee__track{display:flex;align-items:center;white-space:nowrap;animation:marq 34s linear infinite;will-change:transform} .marquee__track .m{display:inline-flex;align-items:center;gap:18px;padding:26px 0;margin-right:56px;font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--muted);transition:color .25s} .marquee__track .m::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track .m:hover{color:var(--text)} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- SERVICES ---------- */ .services{padding-top:clamp(30px,5vw,60px);padding-bottom:clamp(30px,5vw,60px)} .srow{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;border-top:1px solid var(--line);padding:30px 8px;position:relative;cursor:default;transition:padding .35s,background .35s} .srow:last-child{border-bottom:1px solid var(--line)} .srow .sn{font-family:var(--mono);font-size:13px;color:var(--muted-2)} .srow .stitle{font-size:clamp(26px,4vw,52px);font-weight:600;letter-spacing:-.03em;transition:transform .35s,color .35s;display:flex;align-items:center;gap:18px} .srow .stitle .ai-badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:5px 11px;text-transform:uppercase} .srow .sdesc{font-size:14.5px;line-height:1.5;color:var(--muted);max-width:30ch;justify-self:end;text-align:right;opacity:0;transform:translateX(14px);transition:opacity .35s,transform .35s} .srow .sarrow{position:absolute;right:8px;color:var(--orange);font-size:22px;opacity:0;transition:.35s} .srow:hover{padding-left:26px;background:linear-gradient(90deg,rgba(247,69,22,.08),transparent 60%)} .srow:hover .stitle{transform:translateX(6px);color:var(--orange)} .srow:hover .sdesc{opacity:1;transform:none} @media(hover:none){.srow .sdesc{opacity:.7;transform:none;font-size:13px}} /* ---------- AI ---------- */ .ai{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#141416,#0c0c0d);padding:clamp(30px,5vw,68px);margin-bottom:14px} .ai .orb{position:absolute;width:520px;height:520px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(247,69,22,.6),rgba(255,106,56,.15) 45%,transparent 70%);filter:blur(30px);animation:float1 16s ease-in-out infinite;pointer-events:none} .ai__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2} .ai .smeta{padding-top:0} .ai h2{font-size:clamp(32px,5vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:600;margin:8px 0 20px;text-wrap:balance} .ai h2 .o{color:var(--orange)} .ai p{font-size:16px;line-height:1.6;color:var(--muted);max-width:48ch;margin-bottom:26px} .ai__tags{display:flex;flex-wrap:wrap;gap:8px} .ai__tags span{font-family:var(--mono);font-size:12px;border:1px solid var(--line-2);padding:7px 12px;border-radius:999px;color:var(--text);background:rgba(255,255,255,.03)} /* terminal panel (shared by AI + agent) */ .term{border:1px solid var(--line-2);border-radius:14px;background:rgba(0,0,0,.4);font-family:var(--mono);font-size:13px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)} .term .bar{display:flex;align-items:center;gap:7px;padding:13px 15px;border-bottom:1px solid var(--line);color:var(--muted-2);font-size:11.5px} .term .bar i{width:10px;height:10px;border-radius:50%;background:#2a2a2d;display:block} .term .bar i:nth-child(1){background:var(--orange)} .term .body{padding:18px;line-height:1.95;color:var(--muted)} .term .body .c2{color:var(--orange)}.term .body .c3{color:var(--text)}.term .body .c1{color:var(--muted-2)} .cursor{display:inline-block;width:8px;height:15px;background:var(--orange);vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} /* ---------- WHY (AI çağında partner) ---------- */ .why{padding-bottom:20px} .why__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .why h2{font-size:clamp(32px,4.8vw,62px);line-height:.98;letter-spacing:-.035em;font-weight:600;margin-bottom:20px;text-wrap:balance} .why h2 .o{color:var(--orange)} .why h2 .stroke{color:transparent;-webkit-text-stroke:1.3px var(--text)} .why p.lead{font-size:16px;line-height:1.65;color:var(--muted);max-width:50ch;margin-bottom:26px} .wfeat{border-top:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:6px 16px;padding:15px 4px;transition:background .25s,padding .25s} .wfeat:last-of-type{border-bottom:1px solid var(--line)} .wfeat:hover{background:linear-gradient(90deg,rgba(247,69,22,.06),transparent 70%);padding-left:12px} .wfeat .wn{font-family:var(--mono);font-size:12px;color:var(--orange);padding-top:3px} .wfeat h4{font-size:16.5px;font-weight:600;letter-spacing:-.01em} .wfeat p{font-size:13.5px;line-height:1.5;color:var(--muted);grid-column:2} /* diff panel */ .diffbody{padding:10px 0 14px;line-height:1.9;font-size:12.5px;font-family:var(--mono)} .diffbody .hunk{color:var(--muted-2);padding:2px 18px 8px} .diffbody .dl{display:flex;gap:10px;padding:1.5px 18px;color:var(--muted)} .diffbody .dl b{font-weight:400;flex:none} .diffbody .del{color:#dc9384;background:rgba(247,69,22,.07)} .diffbody .del b{color:var(--orange)} .diffbody .add{color:#a6dcba;background:rgba(52,210,123,.06)} .diffbody .add b{color:#34d27b} /* ---------- JOURNEY (scroll-driven particle morph) ---------- */ .journey{position:relative} .jtall{height:420vh} .jsticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)} #jgl{position:absolute;inset:0;width:100%;height:100%;display:block} .jhead{position:absolute;top:0;left:0;right:0;padding-top:28px;z-index:2} .jcopy{position:absolute;z-index:2;left:var(--pad);bottom:12vh;width:min(430px,80vw)} .jstage{position:absolute;bottom:0;left:0;right:0;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s;pointer-events:none} .jstage.on{opacity:1;transform:none} .jstage .jn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--orange)} .jstage h3{font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:12px 0 10px} .jstage p{font-size:15px;line-height:1.6;color:var(--muted);max-width:40ch} .jrail{position:absolute;z-index:2;right:calc(var(--pad) * .75);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:11px} .jrail .jd{color:var(--muted-2);transition:color .3s} .jrail .jd.on{color:var(--orange)} .jrail i{width:1px;height:34px;background:var(--line-2)} .jhint{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);animation:jhb 2.4s ease-in-out infinite} @keyframes jhb{0%,100%{opacity:.35}50%{opacity:.85}} /* fallback: no WebGL / motion off / reduced motion */ html.no-jgl .jtall,html.motion-off .jtall{height:auto} html.no-jgl .jsticky,html.motion-off .jsticky{position:static;height:auto;overflow:visible;padding:0 0 20px} html.no-jgl #jgl,html.motion-off #jgl,html.no-jgl .jhint,html.motion-off .jhint,html.no-jgl .jrail,html.motion-off .jrail{display:none} html.no-jgl .jhead,html.motion-off .jhead{position:static;padding-top:0} html.no-jgl .jcopy,html.motion-off .jcopy{position:static;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:26px var(--pad) 0} html.no-jgl .jstage,html.motion-off .jstage{position:static;opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .jtall{height:auto}.jsticky{position:static;height:auto;overflow:visible;padding:0 0 20px} #jgl,.jhint,.jrail{display:none}.jhead{position:static;padding-top:0} .jcopy{position:static;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:26px var(--pad) 0} .jstage{position:static;opacity:1;transform:none} } @media(max-width:860px){ html.no-jgl .jcopy,html.motion-off .jcopy{grid-template-columns:1fr 1fr} .jcopy{bottom:9vh} .jstage h3{font-size:clamp(26px,7vw,36px)} } @media(max-width:560px){ html.no-jgl .jcopy,html.motion-off .jcopy{grid-template-columns:1fr} .jrail{right:12px} } /* ---------- WORK (clickable cards) ---------- */ .work{padding-bottom:20px} .wcards{display:grid;grid-template-columns:1fr 1fr;gap:14px} .wcard{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:30px;min-height:230px;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s,border-color .3s,background .3s;color:inherit} .wcard:first-child{grid-column:1/-1} .wcard .wnum{position:absolute;right:18px;top:6px;font-family:var(--mono);font-size:clamp(60px,9vw,120px);font-weight:700;color:rgba(255,255,255,.04);line-height:1;letter-spacing:-.04em} .wcard .wtag{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:auto} /* client logo lockup (toggled by tweak) */ .wlogo{display:none;align-items:center;gap:14px;margin-top:30px;padding-right:60px} .wlogo .mono{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:20px;letter-spacing:-.02em;color:#fff;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .wlogo .wm{font-size:clamp(22px,2.8vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.05} html.show-logos .wcard h3{display:none} html.show-logos .wcard .wlogo{display:flex} .wcard h3{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.025em;margin-top:30px} .wcard p{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:46ch;margin-top:10px} .wcard .wfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px} .wcard .res{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--orange)} .wcard .cta-link{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:.25s;white-space:nowrap} .wcard:hover .cta-link{color:var(--text)} .wcard:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--card-2)} .wcard .glowdot{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(247,69,22,.25),transparent 65%);right:-80px;bottom:-120px;opacity:0;transition:opacity .35s;pointer-events:none} .wcard:hover .glowdot{opacity:1} /* ---------- PRODUCTS (in-house) ---------- */ .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .prod{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:28px;overflow:hidden;transition:transform .28s,border-color .28s,background .28s;color:inherit} .prod:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--card-2)} .prod__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .prod__mark{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:22px;color:#fff;flex:none} .prod__stage{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-2);border-radius:999px;padding:5px 10px} .prod h4{font-size:23px;font-weight:600;letter-spacing:-.02em} .prod .url{font-family:var(--mono);font-size:12px;color:var(--orange);margin-top:4px} .prod p{font-size:14px;line-height:1.55;color:var(--muted);margin-top:12px;flex:1} .prod__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px} .prod__foot .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 9px} /* ---------- AGENT / LLM-DISCOVERY ---------- */ .agent{position:relative;border:1px solid var(--line);border-radius:24px;background:var(--bg-2);padding:clamp(28px,4vw,56px);overflow:hidden;margin-bottom:14px} .agent__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:2} .agent h2{font-size:clamp(30px,4.4vw,56px);line-height:1;letter-spacing:-.03em;font-weight:600;margin-bottom:18px;text-wrap:balance} .agent h2 .o{color:var(--orange)} .agent p{font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;margin-bottom:22px} .agent__list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px} .agent__list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--text)} .agent__list li::before{content:"→";color:var(--orange);font-family:var(--mono);flex:none;margin-top:1px} .agent__list li span{color:var(--muted)} /* ---------- APPROACH ---------- */ .approach{padding-bottom:30px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .step{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--card);position:relative;overflow:hidden;transition:border-color .25s} .step:hover{border-color:var(--orange)} .step .n{font-family:var(--mono);font-size:13px;color:var(--orange)} .step h4{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:16px 0 9px} .step p{font-size:14px;line-height:1.55;color:var(--muted)} .step .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--line)} .step .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--orange)} .step:nth-child(2) .bar::after{width:50%}.step:nth-child(3) .bar::after{width:75%}.step:nth-child(4) .bar::after{width:100%} /* ---------- CONTACT + MAP ---------- */ .contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:stretch} .contact__card{border:1px solid var(--line);border-radius:24px;background:var(--bg-2);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column} .contact__card h2{font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.03em;font-weight:600;text-wrap:balance} .contact__card h2 .o{color:var(--orange)} .contact__card p.lead{font-size:16px;line-height:1.6;color:var(--muted);margin:18px 0 24px;max-width:42ch} .contact__card .row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px} .offices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto} .office{border:1px solid var(--line);border-radius:14px;padding:18px} .office . flag,.office .oname{font-weight:600;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px} .office .oname .pin{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px 1px var(--orange)} .office .oaddr{font-size:13px;line-height:1.5;color:var(--muted);margin-top:10px} .office .otag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-top:10px} /* stylized Tint map */ .tintmap{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#0c0d10;min-height:420px;display:flex} .tintmap svg{position:absolute;inset:0;width:100%;height:100%} .tintmap .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);z-index:4} .tintmap .pin svg{position:static;width:34px;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))} .tintmap .pin__pulse{position:absolute;left:50%;bottom:-4px;width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:var(--orange);opacity:.5;animation:pulse2 2.4s ease-out infinite} @keyframes pulse2{0%{transform:translateX(-50%) scale(.4);opacity:.6}100%{transform:translateX(-50%) scale(3.2);opacity:0}} .tintmap__pill{position:absolute;top:16px;left:16px;z-index:5;display:inline-flex;align-items:center;gap:8px;background:rgba(10,10,11,.7);backdrop-filter:blur(8px);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;font-family:var(--mono);font-size:11.5px;color:var(--text);white-space:nowrap} .tintmap__pill .live{width:7px;height:7px;border-radius:50%;background:#34d27b;box-shadow:0 0 8px 1px #34d27b} .tintmap__card{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;background:rgba(10,10,11,.78);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .tintmap__card .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)} .tintmap__card .addr{font-size:14px;line-height:1.5;color:var(--text);margin-top:7px;max-width:42ch} .tintmap__badge{position:absolute;top:16px;right:16px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);background:rgba(10,10,11,.6);border:1px solid var(--line);border-radius:999px;padding:5px 10px;transition:.2s} .tintmap__badge:hover{color:var(--orange);border-color:var(--orange)} .tintmap__attr{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.3)} /* ---------- CTA ---------- */ .cta{position:relative;text-align:center;padding:clamp(64px,10vw,150px) 0;overflow:hidden} .cta .glow{width:70vw;height:70vw;max-width:760px;max-height:760px;background:radial-gradient(circle,rgba(247,69,22,.4),transparent 60%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 8s ease-in-out infinite} @keyframes pulse{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}} .cta h2{font-size:clamp(42px,8.5vw,118px);line-height:.94;letter-spacing:-.04em;font-weight:600;max-width:16ch;margin:0 auto;text-wrap:balance;position:relative;z-index:2} .cta h2 .o{color:var(--orange)} .cta p{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:28px 0 34px;position:relative;z-index:2} .cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--line);background:var(--bg-2)} .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:30px;padding:56px 0 34px} .foot p.fd{font-size:14px;line-height:1.6;color:var(--muted);max-width:38ch;margin-top:16px} .foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px} .foot a.fl{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted);padding:5px 0;transition:.18s} .foot a.fl:hover{color:var(--orange)} .foot a.fl .ext{font-family:var(--mono);font-size:10px;color:var(--muted-2)} .footbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding:20px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted-2);text-transform:uppercase} /* ---------- TWEAKS PANEL (vanilla) ---------- */ #tweaks{position:fixed;right:18px;bottom:18px;z-index:90;width:300px;background:rgba(16,16,18,.96);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);font-family:var(--disp);color:var(--text);display:none;overflow:hidden} #tweaks.on{display:block} #tweaks .tk-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);cursor:grab} #tweaks .tk-head b{font-size:14px;letter-spacing:-.01em} #tweaks .tk-head .x{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px} #tweaks .tk-head .x:hover{color:var(--text);background:rgba(255,255,255,.08)} #tweaks .tk-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:18px} #tweaks .tk-sec{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} #tweaks .tk-row{display:flex;flex-direction:column;gap:9px} #tweaks .tk-row>span{font-size:13px;color:var(--muted)} #tweaks .tk-seg{display:flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden} #tweaks .tk-seg button{flex:1;background:transparent;border:0;color:var(--muted);font-family:var(--mono);font-size:11px;padding:8px 6px;cursor:pointer;transition:.18s;letter-spacing:.03em} #tweaks .tk-seg button.on{background:var(--orange);color:#fff} #tweaks .tk-swatches{display:flex;gap:8px} #tweaks .tk-sw{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:.15s} #tweaks .tk-sw.on{border-color:var(--text)} /* ---------- CASE STUDY PAGE ---------- */ .cs-hero{padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(28px,4vw,48px);position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .cs-back{font-family:var(--mono);font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;transition:.2s;white-space:nowrap} .cs-back:hover{color:var(--orange)} .cs-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:18px} .cs-hero h1{font-size:clamp(40px,7vw,92px);line-height:.95;letter-spacing:-.04em;font-weight:600;text-wrap:balance;max-width:16ch} .cs-hero .lead{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--muted);max-width:54ch;margin-top:24px} .cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px;margin-top:42px;overflow:hidden;background:var(--card)} .cs-meta div{padding:20px 22px;border-right:1px solid var(--line)} .cs-meta div:last-child{border-right:0} .cs-meta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .cs-meta .v{font-size:16px;font-weight:600;margin-top:8px;letter-spacing:-.01em} .cs-section{padding-top:clamp(40px,6vw,70px);padding-bottom:clamp(40px,6vw,70px);border-bottom:1px solid var(--line)} .cs-cols{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px} .cs-cols h2{font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:600;text-wrap:balance} .cs-cols .body{font-size:16px;line-height:1.7;color:var(--muted)} .cs-cols .body p{margin-bottom:16px} .cs-cols .body strong{color:var(--text);font-weight:600} .cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px} .cs-stat{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--card)} .cs-stat .k{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1} .cs-stat .k .o{color:var(--orange)} .cs-stat .v{font-size:14px;color:var(--muted);margin-top:10px} .cs-list{list-style:none;display:flex;flex-direction:column;gap:14px} .cs-list li{display:flex;gap:14px;font-size:16px;line-height:1.5;color:var(--text)} .cs-list li::before{content:"—";color:var(--orange);flex:none} .cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .cs-chips span{font-family:var(--mono);font-size:12px;border:1px solid var(--line-2);padding:7px 12px;border-radius:999px;color:var(--text);background:rgba(255,255,255,.03)} .cs-next{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(34px,5vw,60px) 0;flex-wrap:wrap} .cs-next .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px} .cs-next a:not(.btn){font-size:clamp(28px,4vw,48px);font-weight:600;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:16px;transition:.25s} .cs-next a:not(.btn):hover{color:var(--orange)} /* ---------- PROJECT BRIEF COMPOSER (closing CTA) ---------- */ .pbuild{max-width:1020px;margin:34px auto 0;display:grid;grid-template-columns:1.05fr .95fr;gap:16px;text-align:left} .pb-col{border:1px solid var(--line);border-radius:20px;background:var(--card);padding:clamp(20px,2.6vw,30px)} .pb-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px} .pb-lbl .o{color:var(--orange)} .pb-group{margin-bottom:20px} .pb-group:last-child{margin-bottom:0} .pb-chips{display:flex;flex-wrap:wrap;gap:8px} .pb-chips button{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--muted);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.16s} .pb-chips button:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-1px)} .pb-chips button.on{color:#fff;border-color:var(--orange);background:var(--orange)} .pb-note input,.pb-id input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:12px;color:var(--text);font-family:var(--disp);font-size:14.5px;padding:12px 14px;outline:none;transition:border-color .2s} .pb-note input:focus,.pb-id input:focus{border-color:var(--orange)} .pb-note input::placeholder,.pb-id input::placeholder{color:var(--muted-2)} .pb-two{display:grid;grid-template-columns:1fr 1.2fr;gap:8px} #pbBot{width:100%;height:170px;display:block;margin:2px 0 8px;flex:none} .pb-term{display:flex;flex-direction:column} .pb-pre{flex:none;font-family:var(--mono);font-size:13px;line-height:2;color:var(--muted);white-space:pre-wrap;word-break:break-word;padding:6px 2px 10px} .pb-pre .pk{color:var(--muted-2)} .pb-pre b{color:var(--text);font-weight:500} .pb-pre i{font-style:normal;color:var(--muted-2);opacity:.6} .pb-pre .pc{color:var(--muted-2)} .pb-pre .pok{color:#34d27b} .pb-pre .pwr{color:#e0705a} .pb-pre .pbcur{display:inline-block;width:8px;height:15px;background:var(--orange);vertical-align:-2px;margin-left:7px} .pb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px} .pb-send.ok{background:#1F8A5B!important;border-color:#1F8A5B!important;pointer-events:none} .pb-alt{font-family:var(--mono);font-size:11.5px;color:var(--muted-2)} .pb-alt a{color:var(--muted);transition:.2s} .pb-alt a:hover{color:var(--orange)} @media(max-width:900px){.pbuild{grid-template-columns:1fr}.pb-two{grid-template-columns:1fr}#pbBot{height:140px}} /* ---------- PRODUCT SHOWCASE (afilli) ---------- */ .pshow{border-top:1px solid var(--line)} .pitem{position:relative;display:grid;grid-template-columns:88px 1fr;gap:18px 26px;align-items:start;padding:clamp(28px,4vw,46px) 8px;border-bottom:1px solid var(--line);overflow:hidden;transition:background .3s} .pitem::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(560px circle at var(--mx,70%) var(--my,50%),rgba(247,69,22,.09),transparent 62%)} .pitem:hover::after{opacity:1} .pled{display:flex;flex-direction:column;gap:12px;padding-top:10px} .pidx{font-family:var(--mono);font-size:13px;color:var(--muted-2)} .pst{font-family:var(--mono);font-size:10px;letter-spacing:.1em;white-space:nowrap;display:inline-flex;gap:6px;align-items:center} .pst.live{color:#34d27b}.pst.beta{color:var(--orange)}.pst.dev{color:var(--muted-2)} .pbody{position:relative;z-index:1;max-width:56ch} .pname{font-size:clamp(38px,5.6vw,72px);line-height:.98;letter-spacing:-.035em;font-weight:600;color:transparent;-webkit-text-stroke:1.4px var(--text);transition:color .35s,-webkit-text-stroke-color .35s;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .pitem:hover .pname{color:var(--text)} .pdom{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted-2);-webkit-text-stroke:0;transition:color .3s;white-space:nowrap} .pitem:hover .pdom{color:var(--orange)} .pbody p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:14px} .ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .ptags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--muted)} .pwm{position:absolute;right:clamp(-20px,1vw,30px);top:50%;transform:translateY(-50%) rotate(-8deg);font-size:clamp(160px,22vw,270px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;user-select:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),-webkit-text-stroke-color .5s;z-index:0} .pitem:hover .pwm{transform:translateY(-50%) rotate(-2deg) scale(1.05);-webkit-text-stroke-color:rgba(247,69,22,.22)} @media(max-width:860px){ .pitem{grid-template-columns:1fr;gap:10px} .pled{flex-direction:row;align-items:center;padding-top:0} .pwm{display:none} .pname{-webkit-text-stroke:0;color:var(--text)} } /* ---------- RESPONSIVE ---------- */ @media(max-width:900px){ .navlinks{display:none} .ai__grid,.agent__grid,.contact__grid,.cs-cols,.why__grid{grid-template-columns:1fr;gap:28px} .ai__grid>*,.agent__grid>*,.contact__grid>*,.why__grid>*{min-width:0} .term{min-width:0} .term .body,.diffbody{overflow-x:auto} .wcards{grid-template-columns:1fr}.wcard:first-child{grid-column:auto} .prodgrid{grid-template-columns:1fr} .steps,.cs-meta{grid-template-columns:1fr 1fr} .cs-stats{grid-template-columns:1fr} .srow{grid-template-columns:44px 1fr}.srow .sdesc{display:none} .foot{grid-template-columns:1fr 1fr} .offices{grid-template-columns:1fr} } @media(max-width:560px){ .steps,.cs-meta{grid-template-columns:1fr} #tweaks{right:10px;left:10px;width:auto;bottom:10px} .clihint{display:none} /* ⌘K terminal is a keyboard feature; reclaim header space on phones */ .navctrl{gap:8px} .navctrl .btn{padding:9px 14px;font-size:13px} .toggle button{padding:6px 10px} .brand{font-size:17px} } html:not([lang="en"]) [data-en]{display:none!important} html[lang="en"] [data-tr]{display:none!important}