@font-face{font-family:"Heebo";src:url("/assets/fonts/heebo-hebrew.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:optional;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";src:url("/assets/fonts/heebo-latin.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;--bg:#030e20;--bg2:#05162e;--panel:#091b39;--ink:#f9fbff;--text:#d2dded;--muted:#8fa7c6;--cyan:#31d8f0;--blue:#3e8dff;--purple:#b958ff;--line:rgba(124,175,233,.18);--max:1180px;--grad:linear-gradient(110deg,#19dfed 0%,#4eabff 43%,#bb59ff 100%);font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.65;overflow-x:hidden}
body::selection{background:#295aad;color:white}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,svg{max-width:100%}
img{display:block}
p{margin:0}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.04em}
h1,h2{font-weight:850}
.container{width:min(var(--max),calc(100% - 80px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-90px;inset-inline-start:16px;z-index:999;background:white;color:#061226;border-radius:9px;padding:10px 20px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.header{height:76px;position:fixed;top:0;inset-inline:0;z-index:50;background:rgba(1,11,27,.77);backdrop-filter:blur(17px);border-bottom:1px solid rgba(167,210,255,.14);transition:background .3s,box-shadow .3s}
.header.is-scrolled{background:rgba(1,10,27,.94);box-shadow:0 12px 30px #0004}
.head-inner{direction:ltr;height:100%;display:flex;align-items:center;gap:34px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;direction:ltr;font-size:21px;font-weight:850;letter-spacing:-.05em;white-space:nowrap}
.brand img{width:34px;height:34px;object-fit:contain}
.brand-ai{background:var(--grad);background-clip:text;color:transparent}
.nav-desktop{direction:rtl;display:flex;align-items:center;justify-content:center;gap:26px;flex:1}
.nav-desktop a{font-size:13px;font-weight:650;color:#c1cce0;white-space:nowrap;transition:color .2s}
.nav-desktop a:hover,.nav-desktop a[aria-current=page]{color:white}
.nav-desktop a{position:relative}
.nav-desktop a:after{content:"";position:absolute;left:50%;bottom:-8px;width:17px;height:2px;margin-left:-8.5px;background:var(--cyan);border-radius:5px;transform:scaleX(0);opacity:0;transition:transform .35s ease,opacity .35s ease}
.nav-desktop a[aria-current=page]:after,.nav-desktop a.is-active:after{transform:scaleX(1);opacity:1}
.nav-desktop.has-spy a[aria-current=page]:not(.is-active):after{transform:scaleX(0);opacity:0}
.nav-desktop.has-spy a[aria-current=page]:not(.is-active){color:#c1cce0}
.nav-desktop a.is-active{color:#fff}
.head-side{display:flex;align-items:center;gap:14px}
.lang{border:1px solid #477bc7;background:rgba(34,79,155,.12);border-radius:9px;padding:5px 10px;font-size:12px;color:#cbdafb;direction:ltr}
.lang i{color:#64769a;font-style:normal;margin-inline:3px}
.menu{display:none;background:none;color:white;border:0;padding:8px;cursor:pointer}
.menu svg{display:block}
.nav-mobile[hidden]{display:none!important}
.nav-mobile{position:absolute;top:76px;inset-inline:0;background:rgba(3,14,32,.98);border-bottom:1px solid #183758;padding:15px 7vw 26px;display:grid;gap:5px}
.nav-mobile a{padding:10px 14px;border-radius:9px;color:#d5e2f8}
.nav-mobile a:hover{background:#102443}
.ico{flex-shrink:0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:#69c9e7;font-size:12px;font-weight:800;letter-spacing:.02em}
.eyebrow-line{width:22px;height:2px;border-radius:3px;background:var(--grad)}
.gradient-text{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:51px;border-radius:100px;padding:12px 24px;font-size:14px;font-weight:800;white-space:normal;line-height:1.35;transition:transform .25s,box-shadow .25s,border-color .25s}
.btn:hover{transform:translateY(-3px)}
.btn .ico{width:17px;height:17px;transform:scaleX(-1)}
html[dir=ltr] .btn .ico{transform:none}
.btn-solid{background:linear-gradient(115deg,#20d9ec,#389efe 52%,#bc59ff);color:#021126;box-shadow:0 8px 34px rgba(63,131,241,.28)}
.btn-solid:hover{box-shadow:0 13px 45px rgba(78,140,247,.48)}
.btn-outline{border:1px solid #4d8ac7;background:rgba(5,18,47,.47);color:#f4f7ff}
.btn-outline:hover{border-color:var(--cyan)}
.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:31px}
/* CINEMATIC HERO */
.hero{min-height:710px;position:relative;overflow:hidden;display:flex;align-items:center;isolation:isolate;background:radial-gradient(ellipse at 72% 22%,#164b7e 0%,#071e3b 42%,#020b1b 80%)}
.hero-scene{position:absolute;left:45%;right:0;top:0;bottom:0;mask-image:linear-gradient(90deg,transparent 0%,#000 28%);z-index:-4;background-image:url('/assets/img/mountain-hero.webp');background-size:cover;background-position:74% 46%;opacity:.74;transform:scale(1.04);filter:saturate(1.3)}
.hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(2,12,30,.95) 0%,rgba(2,12,30,.87) 38%,rgba(2,12,30,.14) 76%,rgba(2,12,30,.1) 100%),linear-gradient(0deg,#030e20 0%,transparent 31%),radial-gradient(ellipse at 76% 40%,transparent 0%,#041127b0 100%)}
html[dir=ltr] .hero-shade{background:linear-gradient(90deg,rgba(2,12,30,.93) 0%,rgba(2,12,30,.86) 38%,rgba(2,12,30,.1) 80%),linear-gradient(0deg,#030e20 0%,transparent 31%)}
html[dir=ltr] .hero-text{margin-left:0;margin-right:auto}
html[dir=ltr] .hero-scene{transform:scaleX(-1) scale(1.04);background-position:74% 46%}
.hero-grid{position:absolute;z-index:-2;inset:0;opacity:.22;background-image:linear-gradient(rgba(132,191,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(132,191,248,.06) 1px,transparent 1px);background-size:85px 85px;mask-image:linear-gradient(90deg,#000,transparent 73%)}
.hero-content{padding-top:132px;padding-bottom:95px;width:min(var(--max),calc(100% - 80px));position:relative}
.hero-text{max-width:730px;margin-right:auto;margin-left:0}
.hero .eyebrow{color:#b5d8fc;font-size:12px;margin-bottom:24px}
.hero h1{font-size:clamp(45px,4.35vw,66px);line-height:1.13;text-wrap:balance;text-shadow:0 3px 18px #00102e88}
.hero-lead{margin-top:28px;color:#eef4ff;font-size:clamp(16px,1.55vw,20px);font-weight:620;line-height:1.85;max-width:700px}
.hero-follow{margin-top:14px;max-width:670px;color:#c4d7ee;font-size:15px;line-height:1.9}
.hero .button-row{margin-top:32px}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:11px;color:#adc1dc;display:flex;align-items:center;gap:11px;flex-direction:column}
.mouse{width:21px;height:31px;border:1.4px solid #bdd4e7;border-radius:11px;display:flex;justify-content:center;padding-top:5px}
.mouse span{width:3px;height:6px;border-radius:2px;background:var(--cyan);animation:mouse 1.5s infinite}
@keyframes mouse{0%{opacity:.4;transform:translateY(0)}70%{opacity:1;transform:translateY(8px)}100%{opacity:0}}
/* SHARED SECTIONS */
.section{position:relative;padding:117px 0;scroll-margin-top:72px;isolation:isolate}
.section-heading{max-width:790px;margin:0 auto 56px;text-align:center}
.section-heading .eyebrow{justify-content:center}
.section-heading h2{font-size:clamp(32px,4.1vw,57px);margin-top:16px;line-height:1.21;text-wrap:balance}
.section-heading>p{margin:19px auto 0;max-width:730px;color:#b4c5df;font-size:16px;line-height:1.9}
.solutions{background:linear-gradient(180deg,#041229 0%,#061a38 51%,#05132b 100%)}
.solutions:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 25%,rgba(31,85,149,.14),transparent 65%)}
.solution-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.solution-card{min-height:344px;padding:27px 24px 30px;background:linear-gradient(160deg,rgba(17,43,83,.7),rgba(5,19,45,.6));border:1px solid rgba(105,165,245,.27);border-radius:17px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.solution-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 12% 12%,#2a59a126,transparent 52%)}
.solution-card:hover{transform:translateY(-8px);border-color:#5ca2fd;box-shadow:0 25px 60px #0006}
.solution-card .solution-icon{width:59px;height:59px;border-radius:15px;background:#263c75;color:#68b6ff;display:grid;place-items:center;margin-bottom:28px}
.solution-card .solution-icon .ico{width:31px;height:31px}
.icon-agents{background:linear-gradient(140deg,#164581,#463380)!important;color:#a5bcff!important}
.icon-automation{background:linear-gradient(140deg,#045c79,#2548af)!important;color:#57e6f7!important}
.icon-integrations{background:linear-gradient(140deg,#133b85,#663caa)!important;color:#c59aff!important}
.icon-custom{background:linear-gradient(140deg,#063e75,#075d64)!important;color:#48e8d9!important}
.solution-index{position:absolute;top:28px;left:25px;color:#729ac7;font-size:12px;font-weight:bold;font-family:monospace}
html[dir=ltr] .solution-index{left:auto;right:25px}
.solution-card h3{font-size:23px;line-height:1.2}
.solution-en{display:block;color:#70a9d2;font-size:11px;font-weight:800;letter-spacing:.08em;direction:ltr;text-align:start;margin-top:10px}
.solution-card p{color:#bbcae0;margin-top:18px;font-size:14px;line-height:1.85}
.corner-arrow{position:absolute;bottom:15px;left:21px;font-size:17px;color:#629fd8}
html[dir=ltr] .corner-arrow{left:auto;right:21px}
.section-outro{margin:38px auto 0;max-width:710px;display:flex;gap:12px;align-items:center;justify-content:center;color:#dde6f6;text-align:center;font-size:15px}
.section-outro a{color:var(--cyan);font-size:23px}
.line-dot{background:var(--grad);width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* EXAMPLES */
.examples{background:#06142e;overflow:hidden}
.examples:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.33;background-image:radial-gradient(circle at 2px 2px,#437aac 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(100deg,#0000,#000,transparent)}
.glow-blob{pointer-events:none;position:absolute;z-index:-1;width:580px;height:580px;left:-210px;top:30%;border-radius:50%;background:radial-gradient(circle,#2c3bba66,transparent 72%);filter:blur(25px)}
.examples-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;margin-bottom:37px}
.examples-intro .section-heading{text-align:start;margin:0;max-width:630px}
.examples-intro .section-heading .eyebrow{justify-content:flex-start}
.examples-intro .section-heading p{margin-inline:0}
.brain-art{height:300px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 40px #2771ff47)}
.brain-art img{width:100%;max-width:450px;height:100%;object-fit:contain}
.example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.example-card{border:1px solid #2b4675;padding:30px 23px 29px;min-height:285px;border-radius:16px;background:linear-gradient(156deg,#0c244a99,#071734a8);position:relative;transition:background .25s,transform .25s}
.example-card:hover{background:#102c56;transform:translateY(-6px)}
.example-icon{color:#77dcff;background:#133766;width:54px;height:54px;border-radius:14px;display:grid;place-items:center}
.example-card:nth-child(2) .example-icon{color:#bca1ff;background:#302758}
.example-card:nth-child(3) .example-icon{color:#77b9ff;background:#1f306b}
.example-card:nth-child(4) .example-icon{color:#67ebd3;background:#0b4557}
.example-index{position:absolute;top:38px;left:24px;font-size:11px;font-weight:800;color:#617faa}
html[dir=ltr] .example-index{left:auto;right:24px}
.example-card h3{font-size:21px;margin-top:28px}
.example-card p{font-size:14px;line-height:1.85;color:#bbcee3;margin-top:13px}
.examples-outro{text-align:center;color:#e1edff;font-weight:800;margin:38px auto 0}
.disclaimer{font-size:11px!important;line-height:1.8!important;color:#849abd!important;text-align:center;margin:19px auto 0!important}
/* CAPABILITIES */
.capabilities{background:radial-gradient(ellipse at center 0%,#0d2452,#040f25 65%)}
.capabilities .section-heading{max-width:900px}
.capacity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:71px}
.capacity{text-align:center;padding:8px 42px 17px;min-height:205px;position:relative}
.capacity+.capacity{border-inline-start:1px solid #214377}
.capacity-icon{color:#75ddf1;display:grid;place-items:center;height:56px;margin-bottom:16px}
.capacity-icon .ico{width:40px;height:40px}
.capacity:nth-child(2) .capacity-icon{color:#a878f6}
.capacity:nth-child(3) .capacity-icon{color:#85aeff}
.capacity h3{font-size:23px;margin-bottom:13px}
.capacity p{color:#b1c5df;font-size:15px;line-height:1.85}
/* ABOUT */
.about{background:linear-gradient(135deg,#061a3a 0%,#07162e 45%,#030e22 100%);border-block:1px solid #153456}
.about-inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:90px;align-items:center}
.about-visual{height:440px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}
.about-symbol{position:relative;width:370px;height:370px;display:grid;place-items:center;max-width:100%}
.about-symbol:before{content:"";position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle at center,#263ca75d,transparent 67%);filter:blur(14px)}
.about-orbit{position:absolute;border:1px solid #3776a16e;border-radius:50%;inset:15px;transform:rotate(20deg)}
.orbit-2{inset:54px;border-color:#7b62dd88;transform:rotate(-35deg);box-shadow:0 0 25px #5940c630}
.about-center{border:1px solid #5990cb;box-shadow:0 0 110px #456ae740;background:linear-gradient(145deg,#102c5b,#171343);border-radius:27px;transform:rotate(-7deg);width:230px;height:250px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:95px;letter-spacing:-.11em;line-height:1;direction:ltr}
.about-center span{color:#a966f2}
.about-center small{font-size:10px;position:absolute;bottom:25px;letter-spacing:.3em;color:#a3bcea}
.about-note{color:#8aaad6;font-family:monospace;letter-spacing:.09em;font-size:10px;direction:ltr}
.about-note span{color:#bf70ff}
.about-copy h2{font-size:clamp(39px,4vw,57px);margin:19px 0 22px}
.about-copy p{color:#c2d0e7;font-size:15px;line-height:1.94;margin:0 0 17px}
.about-copy .about-opening{font-weight:800;color:#f6f8ff;font-size:17px}
/* PROJECTS */
.projects{background:linear-gradient(180deg,#05132b,#051832)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px;max-width:970px;margin:0 auto}
.project-tile{display:block;border:1px solid #2b4a7b;border-radius:18px;overflow:hidden;background:#081d3d;transition:transform .3s,border-color .3s,box-shadow .3s}
.project-tile:hover{transform:translateY(-7px);border-color:#678fe6;box-shadow:0 30px 65px #0007}
.project-thumb{height:230px;position:relative;overflow:hidden;background:#051224}
.project-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.project-tile:hover img{transform:scale(1.045)}
.project-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#06152e55,transparent 55%);pointer-events:none}
.project-open{position:absolute;z-index:1;left:17px;bottom:17px;border-radius:50%;background:var(--grad);width:39px;height:39px;display:grid;place-items:center;color:#03112b;font-size:21px}
html[dir=ltr] .project-open{left:auto;right:17px}
.project-meta{padding:22px 24px 26px}
.project-status{color:#7faef3;font-size:11px;font-weight:800}
.project-meta h3,.project-meta h2{font-family:Arial,sans-serif;letter-spacing:-.02em;font-size:24px;margin:6px 0 8px}
.project-meta p{font-size:14px;line-height:1.75;color:#b4c5de}
.project-action{text-align:center;margin-top:32px}
/* CONTACT */
.contact{padding-block:132px 140px;background:radial-gradient(ellipse at 50% 80%,#102a63,#040d21 70%);border-top:1px solid #173663;overflow:hidden}
.contact:before,.contact:after{content:"";position:absolute;width:100%;height:260px;left:0;bottom:-110px;pointer-events:none;border-top:2px solid transparent;border-radius:50% 50% 0 0;transform:rotate(-5deg)}
.contact:before{border-color:#8746fa88;box-shadow:0 -23px 75px #7431ec45}
.contact:after{transform:rotate(8deg);border-color:#20d5ee99;box-shadow:0 -35px 100px #176edd5a}
.contact-glow{position:absolute;width:600px;height:450px;border-radius:50%;filter:blur(40px);pointer-events:none;opacity:.5}
.contact-glow.a{background:radial-gradient(circle,#5130cf,transparent 68%);left:-320px;bottom:-250px}
.contact-glow.b{background:radial-gradient(circle,#006ea9,transparent 68%);right:-310px;bottom:-200px}
.contact-inner{text-align:center;position:relative;z-index:1;max-width:850px}
.contact-inner .eyebrow{justify-content:center}
.contact h2{font-size:clamp(42px,5vw,70px);margin:16px 0 24px}
.contact p{font-size:17px;line-height:1.85;color:#c9d6ea;max-width:760px;margin:0 auto 13px}
.contact strong{display:block;font-size:20px;margin-top:20px}
.contact-buttons{justify-content:center;margin:32px 0 18px}
.contact-email{display:inline-block;color:#aad0ea;font-size:13px;margin-top:9px;text-decoration:underline;text-underline-offset:4px}
.footer{border-top:1px solid #183253;background:#020b1b}
.footer-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer .brand{font-size:17px}
.footer .brand img{width:27px;height:27px}
.footer p{font-size:12px;color:#859bb8}
.footer-email{color:#91d9fa;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.footer-up{font-size:22px;color:#74b9f7;border:1px solid #243d63;border-radius:50%;display:grid;place-items:center;width:38px;height:38px}
/* INNER PAGES */
.inside-hero{background:radial-gradient(ellipse at 65% 20%,#182d65,#05152e 60%,#031022);padding:188px 0 88px;border-bottom:1px solid #24426a}
.inside-copy h1{font-size:clamp(44px,6vw,74px);margin-top:19px}
.inside-copy>p{font-size:19px;color:#c2cfe7;margin-top:17px;max-width:710px}
.inside-back{display:inline-flex;align-items:center;gap:13px;font-size:14px;color:#9bcdf6;margin-top:35px}
.inside-back .ico{width:18px;transform:scaleX(-1)}
.case-hero .inside-back{margin:0 0 35px}
.case-content{background:#061631}
.case-layout{max-width:1100px;display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:start}
.case-image{border-radius:17px;overflow:hidden;border:1px solid #31558a;box-shadow:0 25px 80px #0008}
.case-image img{width:100%;height:auto}
.case-body h2{font-size:38px;margin-top:10px}
.case-body>p{color:#c7d5e8;line-height:1.9;margin-top:20px}
.case-body h3{font-size:19px;margin-top:25px}
.case-body ul{padding-inline-start:20px;color:#c1d1e6;line-height:2}
.case-body .disclaimer{text-align:start!important}
.case-status{font-weight:750;color:#81def2!important}
.projects-page{min-height:53vh}
.projects-page .disclaimer{margin-top:30px!important}
/* APPEAR */
.reveal{opacity:1}
.has-js .reveal{opacity:0}
.has-js .reveal.visible{opacity:1;animation:revealUp .85s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0s) backwards}
@keyframes revealUp{from{opacity:0;transform:translate3d(0,26px,0)}}
@media(min-width:1500px){.hero{min-height:810px}.hero-content{padding-block:170px 125px}}
@media(max-width:1160px){.nav-desktop{gap:16px}.nav-desktop a{font-size:12px}.brand{font-size:19px}.container{width:min(var(--max),calc(100% - 60px))}.solution-card{padding-inline:18px}.solution-card h3{font-size:21px}.about-inner{gap:45px}}
@media(max-width:970px){.nav-desktop{display:none}.menu{display:block}.hero{min-height:690px}.hero-content{padding-top:140px}.hero h1{font-size:clamp(44px,6vw,64px)}.hero-text{max-width:630px}.solution-grid,.example-grid{grid-template-columns:repeat(2,1fr)}.examples-intro{gap:15px}.brain-art{height:240px}.solution-card{min-height:270px}.example-card{min-height:250px}.about-inner{grid-template-columns:1fr;gap:30px}.about-visual{height:310px;order:2}.about-symbol{transform:scale(.74)}.about-copy{order:1}.case-layout{grid-template-columns:1fr;gap:38px}}
@media(max-width:650px){.container{width:calc(100% - 36px)}.header{height:67px}.nav-mobile{top:67px}.head-inner{gap:15px}.brand{font-size:18px}.brand img{width:30px;height:30px}.lang{padding:4px 7px;font-size:11px}.hero{min-height:760px;align-items:flex-start}.hero-scene{left:0;right:0;mask-image:none;background-position:61% 5%;opacity:.54;filter:saturate(1.2)}.hero-shade{background:linear-gradient(180deg,#04132a66 0%,#04132a5a 16%,#04132aea 49%,#030e20 100%),linear-gradient(270deg,#031027b5,transparent)}html[dir=ltr] .hero-shade{background:linear-gradient(180deg,#04132a66 0%,#04132a5a 16%,#04132aea 49%,#030e20 100%)}.hero-content{padding-top:170px;padding-bottom:120px}.hero-text{max-width:100%;margin:0}.hero .eyebrow{font-size:10px;margin-bottom:17px}.hero h1{font-size:clamp(38px,8.8vw,57px);line-height:1.16}.hero-lead{font-size:16px;line-height:1.73;margin-top:23px}.hero-follow{font-size:14px;margin-top:14px;line-height:1.76}.button-row{gap:12px;margin-top:22px}.btn{font-size:13px;padding:11px 19px;min-height:49px}.hero .btn{width:100%}.hero-scroll{bottom:15px}.section{padding:83px 0}.section-heading{margin-bottom:32px}.section-heading h2{font-size:clamp(31px,7.5vw,45px)}.section-heading>p{font-size:14px;line-height:1.86}.solution-grid,.example-grid,.project-grid{grid-template-columns:1fr;gap:14px}.examples-intro{grid-template-columns:1fr;gap:0}.examples-intro .section-heading{text-align:center}.examples-intro .section-heading .eyebrow{justify-content:center}.examples-intro .section-heading p{margin-inline:auto}.brain-art{height:205px;margin:0 auto 15px}.solution-card{min-height:auto;padding:25px 25px 30px}.solution-icon{margin-bottom:16px!important}.solution-card h3{font-size:23px}.solution-card p{font-size:14px}.example-card{min-height:auto;padding:23px}.example-card h3{margin-top:18px}.capacity-grid{grid-template-columns:1fr;margin-top:34px}.capacity{padding:28px 10px;min-height:auto}.capacity+.capacity{border-inline-start:none;border-top:1px solid #24436f}.capacity p{max-width:360px;margin-inline:auto}.about-visual{height:280px;overflow:hidden}.about-symbol{transform:scale(.68)}.about-note{font-size:9px}.about-copy h2{font-size:41px}.about-copy p{font-size:14px}.project-thumb{height:205px}.contact{padding-block:90px 100px}.contact h2{font-size:42px}.contact p{font-size:15px}.contact strong{font-size:18px}.contact-buttons{flex-direction:column}.contact-buttons .btn{width:100%;max-width:360px}.footer-inner{padding-block:22px;flex-wrap:wrap}.footer p{flex-basis:100%;order:3}.inside-hero{padding:148px 0 65px}.inside-copy h1{font-size:47px}.inside-copy>p{font-size:16px}.case-body h2{font-size:30px}}
@media(max-width:360px){.container{width:calc(100% - 30px)}.hero h1{font-size:35px}.hero-content{padding-top:150px}.hero{min-height:755px}.brand{font-size:16px}.brand img{width:26px;height:26px}.head-side{gap:3px}.lang{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mouse span{animation:none}.reveal,.has-js .reveal{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}.btn,.project-tile,.solution-card,.example-card,.project-thumb img{transition:none!important}}
/* V8: BRAND-FIRST EXPERIENCE · original approved copy retained */
:root{--max:1250px;--cyan:#26d8f5;--purple:#a76afa;--line:rgba(119,164,236,.22)}
body{background:#030b1c;background-image:radial-gradient(ellipse at 15% 14%,rgba(58,35,126,.1),transparent 38%)}
::selection{background:#317ef1;color:#fff}
.header{background:rgba(2,9,27,.64);height:78px;box-shadow:0 8px 45px rgba(0,0,0,.12)}
.header.is-scrolled{background:rgba(2,9,27,.95);box-shadow:0 14px 45px rgba(0,0,0,.3)}
.brand{font-weight:850;letter-spacing:-.055em}
.brand img{filter:drop-shadow(0 0 10px rgba(31,202,255,.24))}
.nav-desktop a{font-size:13px}
.hero{min-height:min(920px,100svh);min-height:780px;padding-bottom:30px;background:radial-gradient(ellipse at 85% 37%,#102d65 0%,transparent 50%),radial-gradient(ellipse at 2% 8%,#23114f 0%,transparent 43%),#030c20}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 34%,rgba(20,120,246,.22),transparent 28%),radial-gradient(circle at 24% 78%,rgba(114,42,219,.1),transparent 33%);pointer-events:none}
.hero-scene{display:none}
.hero-grid{inset:0;background-image:linear-gradient(rgba(125,171,243,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(125,171,243,.055) 1px,transparent 1px);background-size:64px 64px;opacity:.56;mask-image:linear-gradient(0deg,transparent,#000 28%,#000 78%,transparent)}
.hero-shade{background:linear-gradient(0deg,#030b1c 1%,transparent 25%);z-index:-2}
.hero-content{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;gap:40px;width:min(1330px,calc(100% - 88px));padding-top:170px;padding-bottom:145px}
.hero-text{max-width:700px;min-width:0;position:relative;z-index:2;margin:0}
.hero .eyebrow{font-size:12px;letter-spacing:.06em;color:#75d8fb;border:1px solid rgba(59,151,241,.4);border-radius:50px;padding:7px 14px;background:rgba(9,30,65,.66);margin-bottom:23px}
.hero .eyebrow-line{display:none}
.hero h1{font-size:clamp(43px,4.25vw,67px);line-height:1.19;letter-spacing:-.053em;font-weight:900;max-width:780px;text-shadow:0 6px 26px #01071e}
.hero .gradient-text{background-image:linear-gradient(95deg,#42d8ff 5%,#7288ff 52%,#d479f6 100%)}
.hero-lead{font-size:clamp(17px,1.4vw,20px);font-weight:600;line-height:1.82;max-width:690px;margin-top:25px}
.hero-follow{font-size:16px;max-width:690px;line-height:1.85;color:#b5c9e7}
.hero .button-row{margin-top:31px}
.btn{border-radius:12px;padding-inline:25px;min-height:55px;font-size:14px;box-shadow:none}
.btn-solid{background:linear-gradient(110deg,#09d7ef 5%,#458dff 55%,#9754ff 100%);box-shadow:0 10px 38px rgba(35,124,233,.24)}
.btn-outline{border-color:#4b78d1;background:rgba(6,18,46,.74)}
.hero-scroll{bottom:31px}
/* PROJECT/PROCESS/CAPABILITIES VISUAL POLISH */
.section{padding-block:108px}
.solutions{background:linear-gradient(180deg,#030b1c,#07132e 60%,#06122b)}
.solutions .section-heading{max-width:860px}
.section-heading h2{letter-spacing:-.05em}
.solution-grid{gap:18px}
.solution-card{border-radius:20px;min-height:335px;background:linear-gradient(148deg,rgba(18,40,81,.88),rgba(7,19,44,.92));box-shadow:0 17px 35px #01071660}
.solution-card:after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#409cfd,#9b60f6,transparent);opacity:.15;transition:opacity .35s}
.solution-card:hover:after{opacity:1}
.solution-card .solution-icon{border:1px solid rgba(155,191,255,.35);box-shadow:0 10px 25px #07102266}
.examples{background:radial-gradient(ellipse at 75% 25%,#122756,#06132b 65%)}
.examples-outro{font-size:clamp(19px,2.2vw,26px);font-weight:800;line-height:1.6;max-width:890px;padding:19px 26px;border-radius:15px;border:1px solid rgba(111,179,240,.28);background:linear-gradient(100deg,#132958b8,#14235470);box-shadow:0 16px 46px #01071766}
.examples .disclaimer{font-size:14px!important;color:#c4d3e9!important;max-width:780px;letter-spacing:0;margin-top:15px!important}
.capabilities{padding-bottom:95px}
.capacity{padding-inline:34px}
.capacity p{line-height:1.85}
/* FOUR-STEP PATH */
.method{padding-top:100px;padding-bottom:106px;background:radial-gradient(ellipse at 50% 8%,#102b59,#030f26 66%);border-block:1px solid #1c3762;overflow:hidden}
/* REAL TECHNOLOGY LOGOS: no fabricated brands */
.tools-heading{text-align:center;max-width:850px}
.tools-heading .eyebrow{justify-content:center}
.tools-heading h2{font-size:clamp(30px,3.1vw,43px);margin:17px 0 12px}
.tools-heading p{font-size:16px;line-height:1.8;color:#a9c1dd;max-width:670px;margin:0 auto}
/* ABOUT / CONTACT */
.about{background:linear-gradient(145deg,#06142d,#051127 57%,#0b1d43)}
.about-inner{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.about-visual{height:470px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.about-symbol{width:100%;max-width:530px;height:315px;display:flex;align-items:center;justify-content:center;transform:none!important;position:relative}
.about-symbol:before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#224d9c70,#48297e33 40%,transparent 70%);filter:blur(15px)}
.about-logo-frame{position:relative;z-index:3;width:92%;max-width:490px;padding:30px;border:1px solid #497dcf66;border-radius:26px;background:linear-gradient(135deg,#122854b8,#070f2acd);box-shadow:0 25px 75px #010512ac,0 0 44px #1849bb38;transform:rotate(-4deg);animation:logoLevitate 6s ease-in-out infinite alternate}
.about-logo-frame img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 0 15px #248cff2e)}
.about-orbit{opacity:.8;animation:orbit 22s linear infinite}
.about-note{font-size:11px;letter-spacing:.14em}
@keyframes logoLevitate{to{transform:translateY(-10px) rotate(-2deg)}}
.projects{padding-block:83px;background:#041126}
.projects .project-grid{max-width:1020px;margin:auto}
.projects .project-tile{box-shadow:0 16px 45px #01081888}
.projects .project-thumb{height:205px}
.projects .project-meta{padding:18px 20px 21px}
.projects .project-meta p{font-size:14px}
.contact{background:radial-gradient(ellipse at 52% 78%,#1b265b,#061125 71%);padding-block:120px 140px}
.contact .btn{min-width:185px}
/* IN-DEPTH, FACT-GROUNDED PROJECT PAGES */
.inside-hero{background:radial-gradient(ellipse at 65% 0%,#203e85,#061633 58%,#030b1d);padding-top:165px;padding-bottom:80px}
.inside-copy{max-width:1170px}
.case-hero .inside-copy h1{font-size:clamp(62px,7vw,104px);margin:8px 0}
.case-hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.case-hero-tags span{border:1px solid #4265a0;color:#b6dbf9;border-radius:60px;padding:7px 13px;font-size:12px;background:#0a2148}
.case-content{background:linear-gradient(180deg,#06152d,#040f23)}
.case-top-grid{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);align-items:center;gap:52px;margin-bottom:95px}
.case-image{border-radius:19px;box-shadow:0 30px 85px #0009;border-color:#4a78c3}
.case-image img{object-fit:cover}
.case-body h2{font-size:clamp(28px,3vw,39px);margin-top:15px}
.case-body h3{margin-top:26px}
.case-body p{font-size:16px;line-height:1.9}
.case-body ul{margin-top:8px}
.case-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.case-story{background:linear-gradient(150deg,#112b56,#07172e);padding:38px;border:1px solid #345787;border-radius:20px}
.case-story h2{font-size:31px;margin:16px 0}
.case-story p{color:#c1d4e9;line-height:1.9;font-size:16px}
.case-flow,.case-gallery{margin-top:115px}
.case-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.case-flow-item{position:relative;padding:26px 23px;border-radius:18px;background:#0c2042;border:1px solid #2d4772;min-height:190px}
.case-flow-item>span{font-family:Arial,sans-serif;display:inline-block;font-size:19px;font-weight:800;color:#72cff6;border-bottom:2px solid #4b98f9;padding-bottom:8px}
.case-flow-item h3{font-size:21px;margin-top:19px}
.case-flow-item p{color:#bed1e7;font-size:14px;line-height:1.8;margin-top:8px}
.case-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gallery-item{margin:0;border:1px solid #365c96;border-radius:17px;overflow:hidden;background:linear-gradient(140deg,#0c2044,#06152c);box-shadow:0 17px 55px #01081888}
.gallery-item img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;transition:transform .6s}
.gallery-item:hover img{transform:scale(1.025)}
.gallery-item figcaption{font-size:14px;color:#c8ddf6;padding:15px 20px;font-weight:700}
.case-epilogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px;border-top:1px solid #34517b;padding-top:56px;margin-top:95px}
.case-epilogue h2{font-size:31px;margin:15px 0}
.case-epilogue p{font-size:16px;color:#c4d5e9;line-height:1.9}
.case-footer{margin-top:75px;padding-top:35px;border-top:1px solid #31517d;display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.case-footer .disclaimer{margin:0!important;text-align:start!important;flex:1 0 100%;font-size:13px!important;color:#a8bedd!important}
.case-footer .case-status{font-size:15px;margin-bottom:0;flex-basis:100%}
@media(max-width:1160px){.hero-content{width:min(100%,calc(100% - 56px));gap:24px}.hero h1{font-size:clamp(40px,4.5vw,59px)}}
@media(max-width:970px){.hero{min-height:0}.hero-content{display:flex;flex-direction:column;text-align:center;padding-top:131px;padding-bottom:105px}.hero-text{margin:auto;max-width:760px}.hero .eyebrow{justify-content:center}.hero .button-row{justify-content:center}.hero-scroll{bottom:12px}.about-inner{grid-template-columns:1fr}.about-visual{order:2;height:340px}.about-symbol{height:280px}.about-copy{order:1}.case-top-grid{grid-template-columns:1fr}.case-flow-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.header{height:67px}.hero{padding-bottom:10px}.hero-content{width:calc(100% - 36px);padding-top:112px;padding-bottom:86px}.hero .eyebrow{font-size:10px}.hero h1{font-size:clamp(35px,9.2vw,53px)}.hero-lead{font-size:16px;line-height:1.77;margin-top:22px}.hero-follow{font-size:14px;line-height:1.85}.hero .button-row{margin-top:24px}.hero .btn{width:100%;min-height:50px}.hero-scroll{display:none}.section{padding-block:78px}.section-heading>p{font-size:15px;line-height:1.75}.solution-card{min-height:0}.examples-outro{font-size:19px;padding:17px 16px}.examples .disclaimer{font-size:13px!important;line-height:1.7!important}.method{padding-block:78px}.tools-heading h2{font-size:29px}.tools-heading p{font-size:14px}.about-visual{height:230px;overflow:visible}.about-symbol{height:215px}.about-logo-frame{padding:19px;max-width:320px}.about-copy h2{font-size:clamp(35px,9vw,45px)}.projects{padding-block:72px}.contact{padding-block:80px 100px}.case-top-grid{gap:28px;margin-bottom:60px}.case-story-grid,.case-flow-grid,.case-gallery-grid,.case-epilogue{grid-template-columns:1fr}.case-story{padding:26px}.case-story h2,.case-epilogue h2{font-size:27px}.case-flow,.case-gallery{margin-top:72px}.case-epilogue{gap:32px;margin-top:70px;padding-top:35px}.case-flow-item{min-height:0}.case-footer{margin-top:50px}.case-footer .btn{flex-grow:1}.case-hero .inside-copy h1{font-size:60px}}
@media(max-width:360px){.hero-content{width:calc(100% - 28px)}.about-logo-frame{max-width:280px}}
@media(prefers-reduced-motion:reduce){.about-logo-frame,.about-orbit,.about-portrait,.about-portrait-wrap,.hero::before,.inside-hero::after{animation:none!important}.reveal,.has-js .reveal{opacity:1!important;transform:none!important}}
/* Compact header contact action */
.head-cta{font-size:12px;line-height:1.1;white-space:nowrap;font-weight:850;background:linear-gradient(120deg,#16d6f0,#557eff,#a25cf8);border:1px solid #84bdfe77;padding:10px 14px;border-radius:10px;color:#03122b;box-shadow:0 5px 20px #1289f639;transition:filter .2s,transform .2s}
.head-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
@media(max-width:1180px){.head-cta{display:none}}
/* Integrated founder portrait */
.about-visual{height:560px}
.about-portrait-wrap{position:relative;isolation:isolate;width:min(100%,540px);display:flex;align-items:center;justify-content:center;animation:portraitFloat 6.5s ease-in-out infinite alternate}
.about-portrait{display:block;width:100%;height:auto;object-fit:contain}
.about-note{margin-top:18px;font-size:11px;letter-spacing:.16em;text-align:center}
@keyframes portraitFloat{0%{transform:translateY(0px)}100%{transform:translateY(-12px)}}
@media(max-width:970px){.about-visual{height:auto;padding-top:4px}.about-portrait-wrap{max-width:430px}}
@media(max-width:650px){.about-visual{height:auto}.about-portrait-wrap{max-width:320px}.about-note{font-size:9px;letter-spacing:.13em;margin-top:12px}}
/* ==========================================================================
   PRE-LAUNCH POLISH (2026-10)
   Presentation-only refinements: typography, RTL/LTR fixes, motion and
   interaction details. Copy lives in src/content.mjs and is not touched here.
   ========================================================================== */
/* Typography: one self-hosted family across Hebrew and Latin; Hebrew headings
   need far less negative tracking than Latin display type to stay legible. */
.project-meta h3,.project-meta h2,.case-flow-item>span{font-family:inherit}
.solution-index,.about-note{font-family:var(--mono)}
html[lang=he] :is(h1,h2,h3){letter-spacing:-.012em}
html[lang=en] :is(h1,h2){letter-spacing:-.035em}
.eyebrow{font-size:13px;font-weight:700}
html[lang=en] .eyebrow{letter-spacing:.03em}
.solution-card p,.example-card p,.case-flow-item p,.project-meta p{font-size:15px}
.solution-en{font-size:11.5px}
/* Safari < 18 only understands the prefixed backdrop-filter. */
.header{-webkit-backdrop-filter:blur(17px)}
/* Desktop nav reads in document order in English (it was forced to RTL). */
html[dir=ltr] .nav-desktop{direction:ltr}
/* Hero ambience: slow drift of the existing light wash (transform only). */
.hero::before{inset:-12%;animation:auroraDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes auroraDrift{to{transform:translate3d(-4%,3%,0) scale(1.06)}}
/* Off-screen sections stop their infinite decorative loops (class set by site.js);
   one-off reveal animations are deliberately not listed. */
.is-offscreen.hero::before,.is-offscreen .mouse span,.is-offscreen .about-portrait-wrap,.is-offscreen.inside-hero::after{animation-play-state:paused}
/* Hebrew display line is wider in Heebo; keep the approved two-line hero headline on two lines. */
@media(min-width:971px){html[lang=he] .hero h1{font-size:clamp(40px,3.85vw,60px)}}
/* Pointer-follow highlight on cards (fine pointers only; values set by site.js). */
@media (hover:hover) and (pointer:fine){.solution-card:before{background:radial-gradient(360px circle at var(--mx,-40%) var(--my,-40%),rgba(80,156,255,.16),transparent 62%),radial-gradient(ellipse at 12% 12%,#2a59a126,transparent 52%)}.example-card{background:radial-gradient(340px circle at var(--mx,-40%) var(--my,-40%),rgba(86,150,255,.13),transparent 62%),linear-gradient(156deg,#0c244a99,#071734a8)}.example-card:hover{background:radial-gradient(340px circle at var(--mx,-40%) var(--my,-40%),rgba(86,150,255,.16),transparent 62%),#102c56}}
/* Process connector draws in once the steps are revealed. */
/* Logo strip pause control (WCAG 2.2.2): icon swaps with aria-pressed. */
@media(prefers-reduced-motion:reduce){.nav-desktop a:after,.gallery-item img,.gallery-zoom-icon,.head-cta{transition:none!important}.gallery-item:hover img{transform:none}}
/* Portrait: dissolve the photo's rectangular backdrop into the section and
   light it from behind; the wrapper floats on the compositor. */
.about-portrait-wrap{will-change:transform}
.about-portrait-wrap:before{content:"";position:absolute;z-index:-1;inset:10% 8% 12%;border-radius:50%;background:radial-gradient(ellipse,rgba(62,110,255,.34),rgba(150,82,245,.16) 48%,transparent 72%);filter:blur(34px)}
.about-portrait{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 87%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 87%,transparent);mask-composite:intersect}
.about-note{color:#93b1dc}
/* Inner-page hero: decorative grid + light so the wide hero no longer reads empty. */
.inside-hero{position:relative;overflow:hidden;isolation:isolate}
.inside-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(125,171,243,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(125,171,243,.06) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 55% 85% at 18% 45%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 85% at 18% 45%,#000,transparent 75%)}
html[dir=ltr] .inside-hero:before{-webkit-mask-image:radial-gradient(ellipse 55% 85% at 82% 45%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 85% at 82% 45%,#000,transparent 75%)}
.inside-hero:after{content:"";position:absolute;z-index:-1;width:560px;height:560px;top:-150px;inset-inline-end:-140px;border-radius:50%;background:radial-gradient(circle,rgba(110,80,240,.30),rgba(30,140,255,.12) 45%,transparent 70%);animation:orbDrift 20s ease-in-out infinite alternate;will-change:transform}
@keyframes orbDrift{to{transform:translate3d(0,40px,0) scale(1.08)}}
.case-hero .inside-back{display:flex;width:fit-content;margin:0 0 30px}
.case-hero .inside-copy h1{overflow-wrap:anywhere}
/* Case-study gallery: zoom affordance + lightbox (dialog built by site.js). */
.gallery-zoom{display:block;position:relative;overflow:hidden;cursor:zoom-in}
.gallery-zoom-icon{position:absolute;top:14px;inset-inline-end:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#dff4ff;background:rgba(3,12,32,.78);border:1px solid #4b78d1;opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s}
.gallery-zoom-icon .ico{width:20px;height:20px}
.gallery-zoom:hover .gallery-zoom-icon,.gallery-zoom:focus-visible .gallery-zoom-icon{opacity:1;transform:none}
.gallery-zoom:focus-visible{outline-offset:-3px}
@media (hover:none){.gallery-zoom-icon{opacity:.9;transform:none}}
.lightbox{padding:0;border:0;background:transparent;max-width:min(1360px,94vw);max-height:92vh;overflow:visible;color:var(--ink)}
.lightbox::backdrop{background:rgba(2,8,22,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[open]{animation:lightboxIn .3s cubic-bezier(.2,.7,.2,1)}
@keyframes lightboxIn{from{opacity:0;transform:scale(.96)}}
.lightbox img{display:block;width:auto;max-width:100%;max-height:84vh;border-radius:14px;border:1px solid #365c96;box-shadow:0 30px 90px #000a}
.lightbox p{margin-top:12px;text-align:center;font-weight:700;color:#c8ddf6}
.lightbox-close{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;cursor:pointer;color:#fff;background:#0b2147;border:1px solid #4b78d1}
.lightbox-close:hover{border-color:var(--cyan)}
@media(prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}
/* Contact: keep the decorative arcs below the e-mail link. */
.contact:before,.contact:after{bottom:-150px}
/* 404 page shares the site styles (no inline CSS, CSP-safe). */
.not-found{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 70% 10%,#183a7a,#030c20 62%)}
.not-found-main{text-align:center;padding:12vw 0}
.not-found h1{font-size:clamp(36px,6vw,64px);margin-bottom:28px}
@media(max-width:650px){.case-hero .inside-copy h1{font-size:clamp(44px,15vw,60px)}.solution-card p,.example-card p,.project-meta p{font-size:14.5px}}

/* ==========================================================================
   MOTION & SHOWCASE (2026-10-11)
   Living hero scene, process path, tool showcase, scroll choreography and
   depth. Animations use transform/opacity (plus small SVG strokes); every
   infinite loop pauses off-screen (.is-offscreen), on demand
   (html.motion-paused, the "Pause animation" buttons) and is removed under
   prefers-reduced-motion. Decorative layers carry no text.
   ========================================================================== */

/* Header: reading-progress hairline (site.js sets its scaleX transform). */
.scroll-progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;pointer-events:none;will-change:transform}
html[dir=rtl] .scroll-progress{transform-origin:right}

/* Shared pause/resume control (icon swaps with aria-pressed). */
.motion-toggle{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#bfe9ff;background:rgba(8,26,58,.85);border:1px solid #2f5590;transition:border-color .2s,color .2s}
.motion-toggle:hover{border-color:var(--cyan);color:#fff}
html:not(.has-js) .motion-toggle{display:none}
.motion-toggle .ico{width:18px;height:18px}
.motion-toggle[aria-pressed=false] .ico:last-child,.motion-toggle[aria-pressed=true] .ico:first-child{display:none}

/* ---------- Hero: background streaks ---------- */
.hero-flowlines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
.hero-flowlines{will-change:transform;animation:streakDrift 24s ease-in-out infinite alternate}
.hero-flowlines path{fill:none;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:22 9 3 9}
.hero-flowlines path:nth-child(1){stroke:rgba(38,216,245,.38)}
.hero-flowlines path:nth-child(2){stroke:rgba(150,110,255,.3)}
.hero-flowlines path:nth-child(3){stroke:rgba(80,140,255,.28)}
@keyframes streakDrift{from{transform:translate3d(-3%,0,0) scale(1.06)}to{transform:translate3d(3%,-1.5%,0) scale(1.06)}}
/* Inner pages: streaks fade out before they reach the heading side. */
.inside-hero .hero-flowlines{opacity:.75;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 70%);mask-image:linear-gradient(90deg,#000 20%,transparent 70%)}
html[dir=ltr] .inside-hero .hero-flowlines{-webkit-mask-image:linear-gradient(270deg,#000 20%,transparent 70%);mask-image:linear-gradient(270deg,#000 20%,transparent 70%)}

/* ---------- Hero: entrance (transform-led so the LCP text paints immediately) ---------- */
.hero-text>*{animation:heroRise 1s cubic-bezier(.2,.7,.2,1) backwards}
.hero-text>:nth-child(2){animation-delay:.06s}.hero-text>:nth-child(3){animation-delay:.12s}.hero-text>:nth-child(4){animation-delay:.18s}.hero-text>:nth-child(5){animation-delay:.24s}
.hero-text>.eyebrow,.hero-text>.button-row{animation-name:heroFade}
@keyframes heroRise{from{transform:translate3d(0,26px,0)}}
@keyframes heroFade{from{opacity:0;transform:translate3d(0,18px,0)}}
.hero-visual{position:relative;min-width:0;animation:heroFade 1.2s cubic-bezier(.2,.7,.2,1) .15s backwards}

/* ---------- Hero: illustration frame ---------- */
.hero-art{position:relative;padding:46px 0 56px;direction:ltr;perspective:1100px;isolation:isolate;animation:heroFloat 8s ease-in-out infinite alternate}
@keyframes heroFloat{from{transform:translate3d(0,-6px,0)}to{transform:translate3d(0,8px,0)}}
.hero-art-halo{position:absolute;inset:14% -4%;background:radial-gradient(ellipse,#226ce35c,transparent 68%);filter:blur(31px);z-index:-1;will-change:transform,opacity;animation:haloBreath 7s ease-in-out infinite alternate}
@keyframes haloBreath{to{opacity:.55;transform:scale(1.07)}}
.tech-console{position:relative;width:min(100%,650px);border-radius:25px;border:1px solid rgba(116,180,255,.45);background:linear-gradient(145deg,rgba(17,42,94,.9),rgba(3,15,37,.96) 48%,rgba(7,16,47,.98));box-shadow:0 34px 100px #010716da,0 0 70px #1778dd30,inset 0 0 45px #17366355;overflow:hidden;transform:rotateY(-6deg) rotateX(3deg)}
@media(min-width:651px){.tech-console{transform:rotateY(calc(-6deg + var(--tilt-y,0deg))) rotateX(calc(3deg + var(--tilt-x,0deg)));transition:transform .6s cubic-bezier(.2,.7,.2,1)}}
/* A soft light sweep crosses the glass every few seconds. */
.tech-console::after{content:"";position:absolute;inset:-30% -70%;z-index:6;pointer-events:none;background:linear-gradient(105deg,transparent 44%,rgba(140,195,255,.09) 50%,transparent 56%);transform:translate3d(-55%,0,0);animation:glassSweep 9s ease-in-out infinite}
@keyframes glassSweep{0%,58%{transform:translate3d(-55%,0,0)}88%,100%{transform:translate3d(55%,0,0)}}
.console-head{height:58px;border-bottom:1px solid #2b4b84;display:flex;align-items:center;justify-content:space-between;padding:0 19px;gap:12px;background:#081832aa;color:#7dadd5;font-size:10px;font-weight:800;letter-spacing:.1em}
.console-dots{display:flex;gap:6px}.console-dots i{width:7px;height:7px;border-radius:100%;background:#4c6285}.console-dots i:first-child{background:#9d6ef4}.console-dots i:nth-child(2){background:#4086d8}.console-dots i:nth-child(3){background:#2dcea5}
.console-live{font-size:9px;white-space:nowrap;color:#9ae8db;display:flex;align-items:center;gap:7px}
.console-live i{width:6px;height:6px;border-radius:50%;background:#35dca6;box-shadow:0 0 13px #35dca6;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.35;transform:scale(.75)}}
.console-foot{height:52px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#8cb4ef;font-size:10px;letter-spacing:.09em;border-top:1px solid #294472}
.console-meter{display:flex;align-items:flex-end;gap:5px;height:20px}
.console-meter i{width:5px;border-radius:4px 4px 0 0;height:8px;background:linear-gradient(#5fd2ff,#257fef);transform-origin:bottom;animation:meter 2.4s ease-in-out infinite alternate}
.console-meter i:nth-child(2){height:16px;animation-delay:.2s}.console-meter i:nth-child(3){height:10px;animation-delay:.4s}.console-meter i:nth-child(4){height:19px;animation-delay:.3s}.console-meter i:nth-child(5){height:12px;animation-delay:.7s}.console-meter i:nth-child(6){height:16px;animation-delay:.5s}.console-meter i:nth-child(7){height:20px;animation-delay:.8s}
@keyframes meter{to{transform:scaleY(.35)}}
.float-chip{position:absolute;z-index:5;padding:12px 15px;background:linear-gradient(140deg,#122550ee,#1d1950ea);border:1px solid #6768e577;border-radius:13px;box-shadow:0 18px 36px #02091a98;font-size:11px;font-weight:800;letter-spacing:.06em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:chipFloat 6s ease-in-out infinite alternate}
.float-chip span{color:#66e6fc;font-size:15px;margin-right:5px}
.chip-first{right:-11px;top:14px;--r:3deg}
.chip-second{left:-21px;bottom:10px;--r:-2deg;animation-delay:-3s}
@keyframes chipFloat{from{transform:translate3d(0,-6px,0) rotate(var(--r))}to{transform:translate3d(0,6px,0) rotate(var(--r))}}
.hero-toggle{position:absolute;right:14px;bottom:-14px;z-index:7}

/* ---------- Hero: the flow scene on a 660x370 canvas (1 unit = --u) ---------- */
.flow-stage{position:relative;container-type:inline-size;aspect-ratio:660/370;overflow:hidden;background:radial-gradient(ellipse at center,#153c7a4b,transparent 69%)}
.flow-stage>*{--u:calc(100cqw / 660)}
.flow-stage::before{content:"";position:absolute;inset:-19px 0 0 -19px;opacity:.32;background-image:radial-gradient(#75b5ff 1px,transparent 1px);background-size:19px 19px;-webkit-mask-image:radial-gradient(ellipse,#000,transparent 72%);mask-image:radial-gradient(ellipse,#000,transparent 72%);animation:dotDrift 9s linear infinite}
@keyframes dotDrift{to{transform:translate3d(19px,19px,0)}}
.flow-scan{position:absolute;inset:0 0 auto;height:38%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(64,160,255,.07) 55%,rgba(110,200,255,.12) 60%,transparent);transform:translate3d(0,-100%,0);animation:scan 6s linear infinite}
@keyframes scan{to{transform:translate3d(0,265%,0)}}
.flow-paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-paths path{fill:none;stroke-linecap:round}
.orbit-ring{position:absolute;left:calc(234*var(--u));top:calc(89*var(--u));width:calc(192*var(--u));height:calc(192*var(--u));border-radius:50%;border:1px dashed rgba(110,160,255,.26);animation:orbitSpin 40s linear infinite}
.orbit-ring.r2{left:calc(202*var(--u));top:calc(57*var(--u));width:calc(256*var(--u));height:calc(256*var(--u));border-color:rgba(160,110,250,.16);animation-duration:60s;animation-direction:reverse}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.fp-glow{stroke:url(#traceGradient);stroke-width:9;opacity:.13}
.fp-base{stroke:url(#traceGradient);stroke-width:1.5;opacity:.5}
.fp-dash{stroke:url(#traceGradient);stroke-width:2.2;stroke-dasharray:1.6 3.4;opacity:.7}
/* Data packets: a bright head plus a soft trail travel each trace once per 6 s cycle.
   Inputs (A, B) reach the core, the core processes, then outputs (C, D, E) fan out.
   Each packet is a tiny layer (1% of the stage) whose dot overflows it; translate percentages of its own
   size (x100 = stage fraction, sampled from the SVG curves) move it along the trace on the compositor,
   and the composited layer stays dot-sized instead of stage-sized. */
.packets{position:absolute;inset:0;z-index:3;pointer-events:none}
.pk{position:absolute;left:0;top:0;width:1%;height:1%;opacity:0;will-change:transform,opacity;animation:pk-a 6s linear infinite,pkFade 6s linear infinite}
.pk::before{content:"";position:absolute;left:calc(-10*var(--u));top:calc(-10*var(--u));width:calc(20*var(--u));height:calc(20*var(--u));border-radius:50%;background:radial-gradient(circle,#fff 0,#d6f8ff 13%,rgba(54,200,255,.7) 22%,rgba(54,200,255,.18) 35%,transparent 50%)}
.pk.trail{animation-delay:.09s}
.pk.trail::before{background:radial-gradient(circle,rgba(80,215,255,.55) 0,rgba(54,200,255,.22) 25%,transparent 50%)}
.pk-b{animation-name:pk-b,pkFade;animation-delay:.35s}.pk-b.trail{animation-delay:.44s}
.pk-c{animation-name:pk-c,pkFade;animation-delay:2.3s}.pk-c.trail{animation-delay:2.39s}
.pk-d{animation-name:pk-d,pkFade;animation-delay:2.45s}.pk-d.trail{animation-delay:2.54s}
.pk-e{animation-name:pk-e,pkFade;animation-delay:2.6s}.pk-e.trail{animation-delay:2.69s}
@keyframes pkFade{0%{opacity:0}2%,17%{opacity:1}19%,to{opacity:0}}
@keyframes pk-a{0%{transform:translate(2545%,2568%)}1.9%{transform:translate(2587%,2570%)}3.8%{transform:translate(2702%,2604%)}5.7%{transform:translate(2870%,2741%)}7.6%{transform:translate(3067%,3057%)}9.5%{transform:translate(3284%,3581%)}11.4%{transform:translate(3498%,4105%)}13.3%{transform:translate(3689%,4421%)}15.2%{transform:translate(3850%,4558%)}17.1%{transform:translate(3961%,4592%)}19%{transform:translate(4000%,4595%)}to{transform:translate(4000%,4595%)}}
@keyframes pk-b{0%{transform:translate(2545%,7270%)}1.9%{transform:translate(2587%,7268%)}3.8%{transform:translate(2702%,7236%)}5.7%{transform:translate(2870%,7111%)}7.6%{transform:translate(3067%,6820%)}9.5%{transform:translate(3284%,6338%)}11.4%{transform:translate(3498%,5856%)}13.3%{transform:translate(3689%,5565%)}15.2%{transform:translate(3850%,5439%)}17.1%{transform:translate(3961%,5408%)}19%{transform:translate(4000%,5405%)}to{transform:translate(4000%,5405%)}}
@keyframes pk-c{0%{transform:translate(6000%,5000%)}1.9%{transform:translate(6045%,4996%)}3.8%{transform:translate(6171%,4940%)}5.7%{transform:translate(6350%,4718%)}7.6%{transform:translate(6551%,4203%)}9.5%{transform:translate(6763%,3351%)}11.4%{transform:translate(6974%,2500%)}13.3%{transform:translate(7172%,1985%)}15.2%{transform:translate(7347%,1763%)}17.1%{transform:translate(7471%,1707%)}19%{transform:translate(7515%,1703%)}to{transform:translate(7515%,1703%)}}
@keyframes pk-d{0%{transform:translate(6000%,5000%)}1.9%{transform:translate(6031%,5000%)}3.8%{transform:translate(6123%,5000%)}5.7%{transform:translate(6276%,5000%)}7.6%{transform:translate(6487%,5000%)}9.5%{transform:translate(6758%,5000%)}11.4%{transform:translate(7028%,5000%)}13.3%{transform:translate(7240%,5000%)}15.2%{transform:translate(7392%,5000%)}17.1%{transform:translate(7484%,5000%)}19%{transform:translate(7515%,5000%)}to{transform:translate(7515%,5000%)}}
@keyframes pk-e{0%{transform:translate(6000%,5000%)}1.9%{transform:translate(6045%,5004%)}3.8%{transform:translate(6171%,5060%)}5.7%{transform:translate(6350%,5282%)}7.6%{transform:translate(6551%,5797%)}9.5%{transform:translate(6763%,6649%)}11.4%{transform:translate(6974%,7500%)}13.3%{transform:translate(7172%,8015%)}15.2%{transform:translate(7347%,8237%)}17.1%{transform:translate(7471%,8293%)}19%{transform:translate(7515%,8297%)}to{transform:translate(7515%,8297%)}}

.flow-node{position:absolute;z-index:2;display:flex;align-items:center;gap:calc(9*var(--u));width:calc(150*var(--u));height:calc(66*var(--u));padding:calc(11*var(--u));border:1px solid #4777c4aa;border-radius:calc(12*var(--u));background:linear-gradient(145deg,#15376b,#091c40);box-shadow:0 calc(9*var(--u)) calc(25*var(--u)) #01071b99;color:#dfeeff;font-size:calc(11.5*var(--u));font-weight:850;letter-spacing:.06em;line-height:1.25;transform:translate3d(calc(var(--px,0)*var(--d,6)*1px),calc(var(--py,0)*var(--d,6)*1px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.flow-node small{display:block;font-size:calc(10*var(--u));letter-spacing:0;font-weight:500;color:#88a9da;margin-top:calc(3*var(--u))}
.node-sigil{display:grid;place-items:center;flex-shrink:0;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:calc(8*var(--u));border:1px solid #518ad8;color:#73cbff;background:#152c5f;font-size:calc(17*var(--u))}
.flow-node::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid #8fe3ff;box-shadow:0 0 calc(24*var(--u)) rgba(60,190,255,.55),inset 0 0 calc(16*var(--u)) rgba(60,190,255,.22);opacity:0;animation:nodeHit 6s ease-out infinite}
.node-led{position:absolute;top:calc(8*var(--u));right:calc(8*var(--u));width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:#35dca6;box-shadow:0 0 calc(8*var(--u)) #35dca6;opacity:.35;animation:ledHit 6s ease-out infinite}
@keyframes nodeHit{0%{opacity:0}4%{opacity:1}18%,to{opacity:0}}
@keyframes ledHit{0%{opacity:.35}3%{opacity:1}20%,to{opacity:.35}}
.f-a{left:calc(18*var(--u));top:calc(62*var(--u));--d:9}
.f-b{left:calc(18*var(--u));top:calc(236*var(--u));--d:7}
.f-c{left:calc(496*var(--u));top:calc(30*var(--u));--d:8}
.f-d{left:calc(496*var(--u));top:calc(152*var(--u));--d:10}
.f-e{left:calc(496*var(--u));top:calc(274*var(--u));--d:7}
.f-b::after,.f-b .node-led{animation-delay:.35s}
.f-c::after,.f-c .node-led{animation-delay:3.44s}
.f-d::after,.f-d .node-led{animation-delay:3.59s}
.f-e::after,.f-e .node-led{animation-delay:3.74s}
.flow-core{position:absolute;z-index:4;left:calc(264*var(--u));top:calc(128*var(--u));width:calc(132*var(--u));height:calc(114*var(--u));border-radius:calc(22*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 calc(10*var(--u)) #2771ff14,0 0 calc(42*var(--u)) #3b97ff99,0 calc(12*var(--u)) calc(36*var(--u)) #010717cc;transform:rotate(-5deg) translate3d(calc(var(--px,0)*3px),calc(var(--py,0)*3px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* Rotating light border: a conic disc spins inside a rounded clip; the core fill sits above it. */
.core-ring{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden}
.core-ring::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,#2a5fd0 0 52%,#26d8f5 66%,#ffffff 72%,#a76afa 80%,#2a5fd0 92%);animation:orbitSpin 4.5s linear infinite}
.flow-core::before{content:"";position:absolute;inset:calc(2*var(--u));z-index:-1;border-radius:calc(20*var(--u));background:linear-gradient(135deg,#2149b4,#121d72 60%,#632b9a)}
.flow-core::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 calc(60*var(--u)) rgba(80,200,255,.75);opacity:0;animation:nodeHit 6s ease-out 1.15s infinite}
.core-pulse{position:absolute;inset:0;z-index:-3;border-radius:inherit;border:1px solid rgba(130,210,255,.75);opacity:0;animation:corePulse 6s ease-out 1.15s infinite}
.core-pulse.p2{animation-delay:1.45s}
@keyframes corePulse{0%{opacity:.85;transform:scale(1)}24%,to{opacity:0;transform:scale(1.6)}}
.flow-core img{width:calc(28*var(--u));height:auto;object-fit:contain;margin-bottom:calc(-6*var(--u));opacity:.95}
.flow-core strong{font-family:inherit;font-size:calc(44*var(--u));line-height:1.15;letter-spacing:-.05em}
.flow-core small{font-size:calc(7.5*var(--u));letter-spacing:.19em;color:#b9cafa}
.core-eq{display:flex;align-items:flex-end;gap:calc(3*var(--u));height:calc(9*var(--u));margin-top:calc(5*var(--u))}
.core-eq i{width:calc(4*var(--u));height:100%;border-radius:2px;background:#86dcff;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite alternate}
.core-eq i:nth-child(2){animation-delay:-.4s}.core-eq i:nth-child(3){animation-delay:-.8s}.core-eq i:nth-child(4){animation-delay:-.2s}.core-eq i:nth-child(5){animation-delay:-.6s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

@media(max-width:1160px){.hero-content{width:min(100%,calc(100% - 56px));gap:24px}.hero h1{font-size:clamp(40px,4.5vw,59px)}}
@media(max-width:970px){
 .hero{min-height:0}.hero-content{display:flex;flex-direction:column;text-align:center;padding-top:131px;padding-bottom:96px}.hero-text{margin:auto;max-width:760px}.hero .eyebrow{justify-content:center}.hero .button-row{justify-content:center}.hero-scroll{bottom:12px}
 .hero-visual{width:100%}
 .hero-art{width:min(700px,100%);margin:10px auto 0;padding:44px 0 52px;animation:none}
 .chip-first{top:2px;right:-6px}.chip-second{bottom:4px;left:-6px}
 .tech-console{width:100%}
 .hero-toggle{position:relative;right:auto;bottom:auto;margin:6px auto 0}
}
@media(max-width:650px){
 .hero{padding-bottom:10px}.hero-content{width:calc(100% - 36px);padding-top:112px;padding-bottom:70px}.hero .eyebrow{font-size:10px}.hero h1{font-size:clamp(35px,9.2vw,53px)}.hero-lead{font-size:16px;line-height:1.77;margin-top:22px}.hero-follow{font-size:14px;line-height:1.85}.hero .button-row{margin-top:24px}.hero .btn{width:100%;min-height:50px}.hero-scroll{display:none}
 .hero-flowlines{display:none}
 .hero-art{padding:14px 0 6px}
 .tech-console{border-radius:16px;transform:none}
 .console-head{height:38px;padding-inline:10px;font-size:7px}.console-live{font-size:7px}.console-dots i{width:5px;height:5px}
 .console-foot{height:32px;padding-inline:10px;font-size:7px}.console-meter{transform:scale(.7);transform-origin:right}
 .float-chip{display:none}
 .flow-node{font-size:calc(14*var(--u));letter-spacing:.02em;padding:calc(9*var(--u));gap:calc(7*var(--u))}
 .flow-node small{font-size:calc(12*var(--u))}
 .node-sigil{width:calc(28*var(--u));height:calc(28*var(--u))}
 .flow-core small{font-size:calc(9*var(--u));letter-spacing:.12em}
}
/* Small phones: the scene keeps its labels larger and drops the sub-labels (text stays in the DOM). */
@media(max-width:430px){.flow-node small{display:none}.flow-node{font-size:calc(17*var(--u));letter-spacing:0}.node-sigil{width:calc(32*var(--u));height:calc(32*var(--u));font-size:calc(19*var(--u))}.console-head,.console-live,.console-foot{font-size:8px}}

/* ---------- Process: a path that reads in the page direction ---------- */
.method .section-heading{margin-bottom:0}
.process-track{--m:64px;--gap:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:62px}
.process-step{position:relative;display:flex;flex-direction:column;gap:22px}
.step-marker{position:relative;z-index:1;flex:0 0 auto;width:var(--m);height:var(--m);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,#1b4f8f,#111c48 72%);border:1px solid #3f6fc4;box-shadow:0 0 0 6px rgba(38,120,255,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.step-marker::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(38,216,245,.85);border-bottom-color:transparent;border-inline-start-color:rgba(167,106,250,.8);opacity:0}
.step-number{font-size:21px;font-weight:900;color:#a9e6ff;letter-spacing:0;font-variant-numeric:tabular-nums;direction:ltr}
/* Connector from this marker to the next one (logical insets, so it runs right-to-left in Hebrew). */
.step-link{position:absolute;top:calc(var(--m) / 2 - 1px);inset-inline-start:calc(var(--m) + 14px);inset-inline-end:calc(14px - var(--gap));height:2px;border-radius:2px;background:rgba(120,165,240,.16);overflow:hidden}
.process-step:last-child .step-link{display:none}
.step-link::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1ce1e6,#427efa,#a468ee);transform-origin:left}
html[dir=rtl] .step-link::before{transform-origin:right;background:linear-gradient(270deg,#1ce1e6,#427efa,#a468ee)}
/* A spark travels each connector in turn (full-size layer with a 46px light spot, moved by transform). */
.step-link::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff 60%,transparent) no-repeat 0 0/46px 100%;opacity:0;animation:sparkX 3.6s cubic-bezier(.5,0,.5,1) infinite}
html[dir=rtl] .step-link::after{animation-direction:reverse}
.process-step:nth-child(2) .step-link::after{animation-delay:1.2s}.process-step:nth-child(3) .step-link::after{animation-delay:2.4s}
@keyframes sparkX{0%{transform:translateX(-46px);opacity:0}6%,30%{opacity:.95}36%,to{transform:translateX(100%);opacity:0}}
@keyframes sparkY{0%{transform:translateY(-40px);opacity:0}6%,30%{opacity:.95}36%,to{transform:translateY(100%);opacity:0}}
.step-card{flex:1;position:relative;padding:26px 24px 28px;border:1px solid rgba(114,165,240,.28);border-radius:18px;background:linear-gradient(145deg,#10244bac,#061631e0);box-shadow:0 19px 44px #01081670;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.step-card h3{font-size:21px;margin:0 0 9px}.step-card p{font-size:15px;color:#b9cee6;line-height:1.85}
.process-step:hover .step-card{transform:translateY(-6px);border-color:#62b9ff}
.process-step:hover .step-marker{transform:scale(1.06)}
/* One-shot progression once the path scrolls into view: each link fills, then the next marker lights. */
.has-js .process-track .step-link::before{transform:scaleX(0)}
.has-js .process-track.is-drawn .step-link::before{animation:drawX .7s cubic-bezier(.4,0,.2,1) forwards}
.process-track.is-drawn .process-step:nth-child(2) .step-link::before{animation-delay:.75s}
.process-track.is-drawn .process-step:nth-child(3) .step-link::before{animation-delay:1.5s}
.process-track.is-drawn .step-marker{animation:markerLit .6s ease-out forwards}
.process-track.is-drawn .step-marker::before{animation:ringIn .6s ease-out forwards}
.process-track.is-drawn .process-step:nth-child(2) .step-marker,.process-track.is-drawn .process-step:nth-child(2) .step-marker::before{animation-delay:.7s}
.process-track.is-drawn .process-step:nth-child(3) .step-marker,.process-track.is-drawn .process-step:nth-child(3) .step-marker::before{animation-delay:1.45s}
.process-track.is-drawn .process-step:nth-child(4) .step-marker,.process-track.is-drawn .process-step:nth-child(4) .step-marker::before{animation-delay:2.2s}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes markerLit{to{border-color:#6fd3ff;box-shadow:0 0 0 6px rgba(38,160,255,.1),0 0 32px rgba(38,170,255,.4)}}
@keyframes ringIn{from{opacity:0;transform:rotate(-120deg) scale(.85)}to{opacity:1;transform:none}}
html:not(.has-js) .step-marker::before{opacity:1}
@media(max-width:970px){
 .process-track{--m:54px;--gap:18px;grid-template-columns:1fr;max-width:660px;margin:40px auto 0}
 .process-step{flex-direction:row;align-items:flex-start;gap:18px}
 .step-link{top:calc(var(--m) + 10px);bottom:calc(10px - var(--gap));inset-inline-start:calc(var(--m) / 2 - 1px);inset-inline-end:auto;width:2px;height:auto}
 .step-link::before,html[dir=rtl] .step-link::before{transform-origin:top;background:linear-gradient(180deg,#1ce1e6,#427efa,#a468ee)}
 .has-js .process-track .step-link::before{transform:scaleY(0)}
 .has-js .process-track.is-drawn .step-link::before{animation-name:drawY}
 .step-link::after,html[dir=rtl] .step-link::after{background:linear-gradient(180deg,transparent,#fff 60%,transparent) no-repeat 0 0/100% 40px;animation-name:sparkY;animation-direction:normal}
 .step-number{font-size:18px}
 .step-card{padding:20px 20px 22px}
}
@media(max-width:650px){.step-card h3{font-size:19px}.step-card p{font-size:14px}}

/* ---------- Tool showcase: a lit circuit board of 10 tiles ---------- */
.tool-section{position:relative;padding:92px 0 90px;background:radial-gradient(ellipse at 50% 0%,#0b2149,#030b1d 62%);overflow:hidden;isolation:isolate}
.tools-stage{position:relative;margin-top:48px}
.tools-grid{--g:16px;position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.tool-tile{--c:96,165,255;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:138px;padding:20px 12px 18px;border-radius:18px;border:1px solid rgba(var(--c),.26);background:linear-gradient(160deg,#0f2448,#051129);box-shadow:0 16px 40px #01071a80;color:#e4efff;font-size:15px;font-weight:750;direction:ltr;text-align:center;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.tool-tile::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(var(--c),.16),transparent 65%)}
.tool-tile::after{content:"";position:absolute;top:0;inset-inline:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--c),.95),transparent);opacity:.45;transition:opacity .35s}
.tool-logo{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:radial-gradient(circle at 50% 30%,rgba(var(--c),.22),#081632 72%);border:1px solid rgba(var(--c),.4);box-shadow:0 0 0 6px rgba(var(--c),.05),0 10px 26px #0008}
.tool-logo::after{content:"";position:absolute;inset:-7px;border-radius:23px;box-shadow:0 0 24px rgba(var(--c),.5);opacity:0;animation:logoBreath 6s ease-in-out infinite}
.tool-logo img{width:32px;height:32px;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tool-name{position:relative;line-height:1.25}
.tool-tile:hover{transform:translateY(-6px);border-color:rgba(var(--c),.75);box-shadow:0 22px 50px #01071acc,0 0 34px rgba(var(--c),.2)}
.tool-tile:hover::after{opacity:1}
.tool-tile:hover .tool-logo img{transform:scale(1.13)}
@keyframes logoBreath{0%,100%{opacity:0}45%{opacity:.85}}
.tool-tile:nth-child(2) .tool-logo::after{animation-delay:-.6s}.tool-tile:nth-child(3) .tool-logo::after{animation-delay:-1.2s}.tool-tile:nth-child(4) .tool-logo::after{animation-delay:-1.8s}.tool-tile:nth-child(5) .tool-logo::after{animation-delay:-2.4s}.tool-tile:nth-child(6) .tool-logo::after{animation-delay:-3s}.tool-tile:nth-child(7) .tool-logo::after{animation-delay:-3.6s}.tool-tile:nth-child(8) .tool-logo::after{animation-delay:-4.2s}.tool-tile:nth-child(9) .tool-logo::after{animation-delay:-4.8s}.tool-tile:nth-child(10) .tool-logo::after{animation-delay:-5.4s}
.tool-claude{--c:217,119,87}.tool-openai{--c:170,195,235}.tool-elevenlabs{--c:205,215,235}.tool-n8n{--c:234,75,113}.tool-make{--c:168,85,247}.tool-docker{--c:36,150,237}.tool-api{--c:24,210,255}.tool-webhook{--c:166,139,255}.tool-modelcontextprotocol{--c:190,205,230}.tool-cursor{--c:150,200,255}
/* Power-on sequence when the board scrolls into view (one-shot; the final state is the default). */
.has-js .tools-stage:not(.is-live) .tool-tile{opacity:0}
.tools-stage.is-live .tool-tile{animation:tileIn .7s cubic-bezier(.2,.7,.2,1) backwards}
.tools-stage.is-live .tool-tile:nth-child(2){animation-delay:.06s}.tools-stage.is-live .tool-tile:nth-child(3){animation-delay:.12s}.tools-stage.is-live .tool-tile:nth-child(4){animation-delay:.18s}.tools-stage.is-live .tool-tile:nth-child(5){animation-delay:.24s}.tools-stage.is-live .tool-tile:nth-child(6){animation-delay:.3s}.tools-stage.is-live .tool-tile:nth-child(7){animation-delay:.36s}.tools-stage.is-live .tool-tile:nth-child(8){animation-delay:.42s}.tools-stage.is-live .tool-tile:nth-child(9){animation-delay:.48s}.tools-stage.is-live .tool-tile:nth-child(10){animation-delay:.54s}
@keyframes tileIn{from{opacity:0;transform:translate3d(0,22px,0) scale(.94)}}
/* Circuit traces along the row and column centres; tiles sit on top, so traces show in the gaps. */
.tools-board{position:absolute;inset:0;z-index:0;pointer-events:none}
.tools-board i{position:absolute;display:block;overflow:hidden}
.trace-h{left:-60px;right:-60px;height:1px;background:linear-gradient(90deg,transparent,rgba(90,150,240,.34) 7%,rgba(90,150,240,.34) 93%,transparent)}
.trace-v{top:-40px;bottom:-40px;width:1px;background:linear-gradient(180deg,transparent,rgba(90,150,240,.28) 12%,rgba(90,150,240,.28) 88%,transparent)}
.trace-h::after,.trace-v::after{content:"";position:absolute;inset:0;opacity:.9}
.trace-h::after{background:linear-gradient(90deg,transparent,rgba(120,225,255,.95) 60%,transparent) no-repeat 0 0/140px 100%;animation:traceX 7s linear infinite}
.trace-v::after{background:linear-gradient(180deg,transparent,rgba(170,140,255,.9) 60%,transparent) no-repeat 0 0/100% 90px;animation:traceY 6s linear infinite}
html[dir=rtl] .trace-h::after{animation-direction:reverse}
@keyframes traceX{from{transform:translateX(-140px)}to{transform:translateX(100%)}}
@keyframes traceY{from{transform:translateY(-90px)}to{transform:translateY(100%)}}
.trace-h:nth-child(1){top:calc((100% - var(--g,16px)) / 4)}
.trace-h:nth-child(2){top:calc(75% + 4px)}
.trace-h:nth-child(2)::after{animation-delay:-3.5s}
.trace-h:nth-child(n+3){display:none}
.trace-v:nth-child(6){left:10%}.trace-v:nth-child(7){left:30%}.trace-v:nth-child(8){left:50%}.trace-v:nth-child(9){left:70%}.trace-v:nth-child(10){left:90%}
.trace-v:nth-child(7)::after{animation-delay:-1.5s}.trace-v:nth-child(8)::after{animation-delay:-4s}.trace-v:nth-child(9)::after{animation-delay:-2.5s}.trace-v:nth-child(10)::after{animation-delay:-5s}
.tools-controls{display:flex;justify-content:center;margin-top:26px}
@media(max-width:970px){.tools-grid{--g:12px}.tool-tile{min-height:132px;font-size:13.5px;gap:12px;padding-inline:8px}.tool-logo{width:54px;height:54px;border-radius:15px}.tool-logo img{width:28px;height:28px}}
@media(max-width:650px){
 .tool-section{padding-block:70px}
 .tools-stage{margin-top:34px}
 .tools-grid{--g:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tool-tile{flex-direction:row;justify-content:flex-start;min-height:66px;padding:10px 12px;gap:12px;font-size:14px;text-align:start;border-radius:14px}
 .tool-logo{width:42px;height:42px;border-radius:12px;flex:0 0 42px;box-shadow:none}
 .tool-logo::after{border-radius:16px}
 .tool-logo img{width:24px;height:24px}
 .trace-h:nth-child(n){display:block}
 .trace-h:nth-child(1){top:10%}.trace-h:nth-child(2){top:30%}.trace-h:nth-child(3){top:50%}.trace-h:nth-child(4){top:70%}.trace-h:nth-child(5){top:90%}
 .trace-h:nth-child(3)::after{animation-delay:-1.5s}.trace-h:nth-child(4)::after{animation-delay:-5s}.trace-h:nth-child(5)::after{animation-delay:-2.5s}
 .trace-v:nth-child(6){left:25%}.trace-v:nth-child(7){left:75%}.trace-v:nth-child(n+8){display:none}
}
@media(max-width:360px){.tool-tile{font-size:13px;padding-inline:9px;gap:9px}.tool-logo{width:36px;height:36px;flex-basis:36px}.tool-logo img{width:21px;height:21px}}

/* ---------- Scroll choreography ---------- */
@keyframes revealUp{from{opacity:0;transform:translate3d(0,30px,0) scale(.985)}}
.eyebrow-line{transform-origin:right}
html[dir=ltr] .eyebrow-line{transform-origin:left}
.has-js .reveal.visible .eyebrow-line{animation:lineGrow .9s cubic-bezier(.2,.7,.2,1) .2s backwards}
.has-js .section-heading.reveal.visible h2,.has-js .about-copy.reveal.visible h2,.has-js .contact-inner.reveal.visible h2{animation:headingIn 1s cubic-bezier(.2,.7,.2,1) .08s backwards}
.has-js .section-heading.reveal.visible>p{animation:headingIn 1s cubic-bezier(.2,.7,.2,1) .18s backwards}
@keyframes lineGrow{from{transform:scaleX(0)}}
@keyframes headingIn{from{opacity:0;transform:translate3d(0,20px,0)}}
.inside-copy>*{animation:heroFade .9s cubic-bezier(.2,.7,.2,1) backwards}
.inside-copy>:nth-child(2){animation-delay:.07s}.inside-copy>:nth-child(3){animation-delay:.14s;animation-name:heroRise}.inside-copy>:nth-child(4){animation-delay:.21s;animation-name:heroRise}.inside-copy>:nth-child(5){animation-delay:.28s}
.capacity.visible .capacity-icon{animation:iconPop .9s cubic-bezier(.2,.7,.2,1) .15s backwards}
@keyframes iconPop{from{opacity:0;transform:scale(.6) rotate(-12deg)}}
.case-flow-item>span{position:relative}
.has-js .case-flow-item.reveal>span{border-bottom-color:transparent}
.has-js .case-flow-item.reveal.visible>span::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:linear-gradient(90deg,#33d6f3,#4b98f9);transform-origin:right;animation:lineGrow .8s cubic-bezier(.2,.7,.2,1) .25s backwards}
html[dir=ltr].has-js .case-flow-item.reveal.visible>span::after{transform-origin:left}

/* ---------- Cards: depth and light (fine pointers; values from site.js) ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-solid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn-solid:hover::after{transform:translateX(120%)}
.project-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.project-tile:hover .project-thumb::before{transform:translateX(120%)}
.solution-card .solution-icon,.example-icon{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.solution-card:hover .solution-icon,.example-card:hover .example-icon{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
@media (hover:hover) and (pointer:fine){
 .solution-card,.example-card,.project-tile{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,background .25s}
 .solution-card:hover,.example-card:hover,.project-tile:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-8px,0)}
 /* Border light that follows the pointer (masked to a 1px ring). */
 .solution-card::after,.example-card::after,.step-card::after{content:"";position:absolute;inset:0;height:auto;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(230px circle at var(--mx,-40%) var(--my,-40%),rgba(120,205,255,.95),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s}
 .solution-card:hover::after,.example-card:hover::after,.process-step:hover .step-card::after{opacity:1}
 .step-card{background:radial-gradient(340px circle at var(--mx,-40%) var(--my,-40%),rgba(98,185,255,.12),transparent 62%),linear-gradient(145deg,#10244bac,#061631e0)}
}

/* ---------- Section ambience ---------- */
.brain-art img{animation:brainFloat 9s ease-in-out infinite alternate}
@keyframes brainFloat{from{transform:translate3d(0,-6px,0) scale(1)}to{transform:translate3d(0,8px,0) scale(1.03)}}
.about-visual{isolation:isolate}
.about-aura{position:absolute;left:50%;top:46%;width:min(100%,560px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:-1}
.about-aura i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(90,150,255,.22);animation:orbitSpin 46s linear infinite}
.about-aura i::after{content:"";position:absolute;top:50%;left:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#5fd8ff;box-shadow:0 0 14px #36c8ff}
.about-aura i:nth-child(2){inset:9%;border-style:dashed;border-color:rgba(167,106,250,.2);animation-duration:70s;animation-direction:reverse}
.about-aura i:nth-child(2)::after{background:#b48cff;box-shadow:0 0 14px #9a6bff;width:6px;height:6px;margin-top:-3px;left:-3px}
.contact-orbit{position:absolute;left:50%;top:50%;width:min(92vw,900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(80,140,255,.1);pointer-events:none;z-index:0;animation:orbitSpin 80s linear infinite}
.contact-orbit::after{content:"";position:absolute;top:50%;right:-5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#45d6ff;box-shadow:0 0 24px 4px #2ab8ff88}
.contact::before,.contact::after{animation:arcBreath 7s ease-in-out infinite alternate}
.contact::after{animation-delay:-3.5s}
@keyframes arcBreath{from{opacity:.55}to{opacity:1}}

/* ---------- Motion control and off-screen pausing ---------- */
.is-offscreen .hero-flowlines,.is-offscreen .hero-art-halo,.is-offscreen .tech-console::after,.is-offscreen .flow-stage::before,.is-offscreen .flow-scan,.is-offscreen .orbit-ring,.is-offscreen .pk,.is-offscreen .flow-node::after,.is-offscreen .node-led,.is-offscreen .core-ring::before,.is-offscreen .flow-core::after,.is-offscreen .core-pulse,.is-offscreen .core-eq i,.is-offscreen .float-chip,.is-offscreen .console-live i,.is-offscreen .console-meter i,.is-offscreen .hero-art,.is-offscreen .step-link::after,.is-offscreen .trace-h::after,.is-offscreen .trace-v::after,.is-offscreen .tool-logo::after,.is-offscreen .brain-art img,.is-offscreen .about-aura i,.is-offscreen .contact-orbit,.is-offscreen.contact::before,.is-offscreen.contact::after{animation-play-state:paused}
html.motion-paused .hero::before,html.motion-paused .hero-flowlines,html.motion-paused .hero-art,html.motion-paused .hero-art-halo,html.motion-paused .tech-console::after,html.motion-paused .console-live i,html.motion-paused .console-meter i,html.motion-paused .flow-stage::before,html.motion-paused .flow-scan,html.motion-paused .orbit-ring,html.motion-paused .pk,html.motion-paused .flow-node::after,html.motion-paused .node-led,html.motion-paused .core-ring::before,html.motion-paused .flow-core::after,html.motion-paused .core-pulse,html.motion-paused .core-eq i,html.motion-paused .float-chip,html.motion-paused .mouse span,html.motion-paused .step-link::after,html.motion-paused .trace-h::after,html.motion-paused .trace-v::after,html.motion-paused .tool-logo::after,html.motion-paused .brain-art img,html.motion-paused .about-portrait-wrap,html.motion-paused .about-aura i,html.motion-paused .contact-orbit,html.motion-paused .contact::before,html.motion-paused .contact::after,html.motion-paused .inside-hero::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){.hero-art,.hero-art-halo,.hero-flowlines,.tech-console::after,.console-live i,.console-meter i,.flow-stage::before,.flow-scan,.orbit-ring,.pk,.flow-node::after,.node-led,.core-ring::before,.flow-core::after,.core-pulse,.core-eq i,.float-chip,.step-link::after,.trace-h::after,.trace-v::after,.tool-logo::after,.brain-art img,.about-portrait-wrap,.about-aura i,.contact-orbit,.contact::before,.contact::after,.hero::before,.inside-hero::after,.hero-text>*,.hero-visual,.inside-copy>*,.tools-stage .tool-tile,.step-marker,.step-marker::before,.step-link::before,.eyebrow-line,.reveal h2,.reveal>p,.capacity-icon,.case-flow-item>span::after{animation:none!important}}
@media(prefers-reduced-motion:reduce){.packets,.step-link::after,.trace-h::after,.trace-v::after,.flow-scan{display:none}.flow-node::after{opacity:.35}.node-led{opacity:1}.has-js .process-track .step-link::before{transform:none}.step-marker::before{opacity:1}.has-js .tools-stage:not(.is-live) .tool-tile{opacity:1}.motion-toggle,.tools-controls{display:none}.solution-card,.example-card,.project-tile,.flow-node,.flow-core,.tool-tile,.step-card,.step-marker,.btn-solid::after,.project-thumb::before{transition:none!important}.tool-tile:hover,.process-step:hover .step-card,.solution-card:hover,.example-card:hover,.project-tile:hover{transform:none}}

/* ==========================================================================
   GUIDES (2026-10-23): /guides/ index and long-form guide pages (src/guides.mjs).
   Same palette, cards and type scale as the case studies; no infinite animations.
   ========================================================================== */
/* Guides index */
.guides-page{background:linear-gradient(180deg,#06152d,#040f23)}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.guide-card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#112b56,#07172e);border:1px solid #345787;transition:transform .3s,border-color .3s,box-shadow .3s}
a.guide-card:hover{transform:translateY(-6px);border-color:#5ca2fd;box-shadow:0 25px 60px #0007}
.guide-card-art{position:relative;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;background:radial-gradient(ellipse at 50% 0%,rgba(234,75,113,.22),transparent 62%),radial-gradient(ellipse at 85% 100%,rgba(62,141,255,.22),transparent 60%),#081a38;border-bottom:1px solid #2d4772}
.guide-card-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(125,171,243,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(125,171,243,.07) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.guide-card-art>*{position:relative}
.gca-logos{display:flex;align-items:center;gap:12px;direction:ltr}
.gca-vs{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;color:#7f9cc6}
.gca-logo{--c:234,75,113;display:grid;place-items:center;width:68px;height:68px;border-radius:19px;background:radial-gradient(circle at 50% 30%,rgba(var(--c),.25),#081632 72%);border:1px solid rgba(var(--c),.45);box-shadow:0 0 0 7px rgba(var(--c),.06),0 12px 30px #0008}
.gca-zapier{--c:255,79,0}.gca-make{--c:168,85,247}
.gca-paths{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gca-paths i{font-style:normal;font-size:11.5px;font-weight:750;letter-spacing:.04em;color:#cfe3ff;border:1px solid #3b5f97;background:#0a2148;border-radius:40px;padding:4px 11px}
.gca-term{font-family:var(--mono);font-size:12px;color:#8fe9ff;background:#020a18;border:1px solid #24426a;border-radius:9px;padding:6px 12px}
.guide-card .is-soon .guide-card-art,.guide-card.is-soon .guide-card-art{color:#7f9cc6;min-height:190px;background:#071733}
.guide-card.is-soon{border-style:dashed;background:rgba(9,27,57,.55)}
.guide-card.is-soon .ico{width:46px;height:46px}
.guide-card-body{display:flex;flex-direction:column;gap:10px;padding:28px 28px 30px;flex:1}
.guide-card-body h2{font-size:clamp(25px,2.4vw,31px)}
.guide-card-body p{color:#c1d4e9;font-size:15.5px;line-height:1.85}
.guide-card-meta{font-size:13px;color:#8fa7c6;margin-top:auto;padding-top:6px}
.guide-card-cta{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:14.5px;color:#7fe3f6}
.guides-page .inside-back{margin-top:40px}
/* Guide hero */
.guide-hero{padding-bottom:70px}
.guide-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.guide-hero .inside-copy h1{font-size:clamp(40px,5vw,66px);line-height:1.12;text-wrap:balance}
.guide-hero .inside-back{display:flex;width:fit-content;margin:0 0 28px}
.guide-facts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.guide-facts li{display:flex;flex-direction:column;gap:2px;min-width:130px;padding:11px 16px;border-radius:14px;background:rgba(10,33,72,.72);border:1px solid #2f4f7f}
.guide-facts span{font-size:11.5px;font-weight:700;color:#7fb6ea}
.guide-facts strong{font-size:14.5px;color:#f1f6ff}
.guide-cover{perspective:1100px}
.guide-cover-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 30px 30px;border-radius:24px;background:linear-gradient(160deg,rgba(23,52,101,.92),rgba(5,19,45,.94));border:1px solid #4a78c3;box-shadow:0 30px 90px #000a,inset 0 1px 0 rgba(255,255,255,.08);transform:rotateY(-7deg) rotateX(3deg)}
html[dir=ltr] .guide-cover-card{transform:rotateY(7deg) rotateX(3deg)}
.guide-cover-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#31d8f0,transparent 40%,transparent 60%,#b958ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.guide-cover-logo{width:min(100%,330px);height:auto}
.guide-cover-tag{font-size:11px;font-weight:800;letter-spacing:.32em;color:#8fd6f5}
.guide-cover-mark{display:flex;align-items:center;gap:14px;direction:ltr}
.guide-cover-mark strong{font-size:40px;letter-spacing:-.03em}
.guide-cover-paths{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.guide-cover-paths span{font-size:12px;font-weight:750;color:#d7e8ff;border:1px solid #3d64a3;background:#0a2148;border-radius:40px;padding:5px 13px}
.guide-cover-paths span:nth-child(1){border-color:rgba(234,75,113,.6)}.guide-cover-paths span:nth-child(2){border-color:rgba(36,150,237,.7)}.guide-cover-paths span:nth-child(3){border-color:rgba(185,88,255,.65)}
.guide-cover-term{width:100%;font-family:var(--mono);font-size:13px;color:#d9ecff;background:#020a18;border:1px solid #24426a;border-radius:11px;padding:11px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-cover-term b{color:#31d8f0;margin-right:6px}
.guide-cover-term i{display:inline-block;width:8px;height:15px;margin-left:6px;vertical-align:-2px;background:#31d8f0;opacity:.8}
/* Guide layout: sticky contents beside the article */
.guide-body{background:linear-gradient(180deg,#06152d,#040f23);padding-top:80px}
.guide-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.guide-toc{position:sticky;top:100px;padding:22px 16px 18px;border-radius:18px;background:rgba(9,27,57,.7);border:1px solid #2d4772}
.guide-toc-title{font-size:12px;font-weight:800;color:#69c9e7;padding:0 10px 10px;letter-spacing:.02em}
.guide-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.guide-toc a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:9px;font-size:13.5px;line-height:1.45;color:#b7c8e2;border-inline-start:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.guide-toc a span{font-size:11px;font-weight:800;color:#5f7ea9;font-variant-numeric:tabular-nums}
.guide-toc a:hover{background:#102443;color:#fff}
.guide-toc a.is-active{color:#fff;background:linear-gradient(90deg,rgba(49,216,240,.12),transparent);border-inline-start-color:var(--cyan)}
html[dir=rtl] .guide-toc a.is-active{background:linear-gradient(270deg,rgba(49,216,240,.12),transparent)}
.guide-toc a.is-active span{color:var(--cyan)}
.guide-article{max-width:820px;min-width:0}
.guide-section{padding-bottom:84px;margin-bottom:84px;border-bottom:1px solid #1e3a62;scroll-margin-top:10px}
.guide-section:focus{outline:none}
.guide-section-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px}
.guide-section-num{flex:0 0 auto;font-size:44px;font-weight:850;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;padding-top:2px}
.guide-section-head .eyebrow{margin-bottom:8px}
.guide-section h2{font-size:clamp(27px,3vw,40px);line-height:1.22;text-wrap:balance}
.guide-article p{color:#c4d5e9;font-size:17px;line-height:1.9;margin-top:16px}
.guide-article strong,.ui-path{color:#f4f8ff}
.ui-path{font-weight:750}
.guide-article a:not(.btn):not(.choose-card):not(.compare-link){color:#7fe3f6;text-decoration:underline;text-decoration-color:rgba(127,227,246,.4);text-underline-offset:3px}
.guide-article a:not(.btn):not(.choose-card):not(.compare-link):hover{text-decoration-color:currentColor}
.guide-article a[target=_blank]:not(.btn)::after{content:"↗";font-size:.8em;margin-inline-start:3px;text-decoration:none;display:inline-block}
.guide-article code{font-family:var(--mono);font-size:.86em;color:#a9ecff;background:#0b2246;border:1px solid #24497a;border-radius:6px;padding:.08em .42em;overflow-wrap:anywhere}
.guide-subhead{font-size:22px;margin-top:40px}
.guide-list,.guide-ol{margin:14px 0 0;padding-inline-start:22px;color:#c4d5e9;font-size:16.5px;line-height:1.85}
.guide-list li,.guide-ol li{margin-top:8px;padding-inline-start:4px}
.guide-list li::marker{color:var(--cyan)}
.guide-ol li::marker{color:#7fb6ea;font-weight:800}
.guide-small{font-size:13.5px!important;color:#93a9c8!important;line-height:1.8!important;margin-top:18px!important}
/* Callouts */
.callout{display:flex;gap:14px;margin-top:24px;padding:18px 20px;border-radius:16px;background:rgba(14,40,82,.55);border:1px solid #2f5287;border-inline-start:4px solid var(--tone,#3e8dff)}
.callout>.ico{width:24px;height:24px;color:var(--tone,#3e8dff);margin-top:2px}
.callout-title{font-weight:800;color:#fff!important;font-size:16px!important;margin:0!important;line-height:1.5!important}
.callout p:not(.callout-title){font-size:15.5px;margin-top:6px;line-height:1.85}
.callout ul{margin:8px 0 0;padding-inline-start:20px;color:#c4d5e9;font-size:15.5px;line-height:1.85}
.callout-tip{--tone:#31d8f0}.callout-info{--tone:#6f9bff}.callout-warn{--tone:#ffb547;background:rgba(66,46,14,.28);border-color:#6a5326}.callout-success{--tone:#3ddc97;background:rgba(14,66,52,.3);border-color:#25664f}
/* Example workflow chain */
.mini-flow{margin:26px 0 0;padding:20px;border-radius:18px;background:#071a37;border:1px solid #2d4772}
.mini-flow figcaption{font-size:12px;font-weight:800;color:#7fb6ea;margin-bottom:14px}
.mini-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.mini-flow li{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:13px;background:linear-gradient(160deg,#12305e,#0a1d3d);border:1px solid #36609c;font-size:14px;font-weight:650;line-height:1.5;color:#e3edff}
.mini-flow li:not(:last-child)::after{content:"";position:absolute;top:50%;inset-inline-end:-21px;width:16px;height:2px;background:linear-gradient(90deg,#31d8f0,#b958ff)}
.mf-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;color:#021126;background:var(--grad)}
/* Terms */
.term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 0}
.term-grid:has(>.term:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.term{padding:18px 20px;border-radius:16px;background:linear-gradient(160deg,rgba(17,43,83,.7),rgba(5,19,45,.6));border:1px solid rgba(105,165,245,.27)}
.term dt{font-weight:800;font-size:16.5px;color:#fff}
.term dd{margin:6px 0 0;color:#bfd0e8;font-size:15px;line-height:1.8}
/* Comparison */
.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.compare-card{--c:62,141,255;display:flex;flex-direction:column;gap:10px;padding:24px 20px 20px;border-radius:18px;background:linear-gradient(165deg,rgba(var(--c),.16),rgba(5,19,45,.75) 55%);border:1px solid rgba(var(--c),.45);transition:transform .3s,box-shadow .3s}
.compare-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px #0007}
.compare-cloud,.compare-n8n{--c:234,75,113}.compare-docker{--c:36,150,237}.compare-vps,.compare-make{--c:185,88,255}.compare-zapier{--c:255,104,38}
.compare-tag{align-self:flex-start;font-size:11.5px;font-weight:800;color:#fff;background:rgba(var(--c),.3);border:1px solid rgba(var(--c),.6);border-radius:40px;padding:3px 11px}
.compare-card h3{font-size:20px;line-height:1.3}
.guide-article .compare-card p{font-size:14.5px;margin:0;line-height:1.75}
.compare-keys{margin:4px 0 0;display:grid;gap:8px}
.compare-keys div{padding-top:8px;border-top:1px solid rgba(var(--c),.25)}
.compare-keys dt{font-size:11.5px;font-weight:800;color:rgb(var(--c))}
.compare-cloud .compare-keys dt,.compare-n8n .compare-keys dt{color:#ff8fab}.compare-docker .compare-keys dt{color:#6cc0ff}.compare-vps .compare-keys dt,.compare-make .compare-keys dt{color:#d4a2ff}.compare-zapier .compare-keys dt{color:#ffa06b}
.compare-keys dd{margin:2px 0 0;font-size:14px;color:#dbe7f8;line-height:1.6}
.compare-link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:8px;font-size:14px;font-weight:800;color:#fff}
.compare-link .ico,.choose-a .ico,.guide-card-cta .ico{width:17px;height:17px;transition:transform .25s}
html[dir=rtl] .compare-link .ico,html[dir=rtl] .choose-a .ico,html[dir=rtl] .guide-card-cta .ico{transform:scaleX(-1)}
.compare-table-wrap{margin-top:16px;border-radius:18px;border:1px solid #2d4772;overflow:hidden;background:#061733}
.compare-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.compare-table th,.compare-table td{padding:13px 16px;text-align:start;vertical-align:top;border-bottom:1px solid #1d3860}
.compare-table tbody tr:last-child>*{border-bottom:0}
.compare-table thead th{font-size:13px;font-weight:800;color:#fff;background:#0c2348}
.compare-table thead .cc-cloud,.compare-table thead .cc-n8n{box-shadow:inset 0 -2px #ea4b71}.compare-table thead .cc-docker{box-shadow:inset 0 -2px #2496ed}.compare-table thead .cc-vps,.compare-table thead .cc-make{box-shadow:inset 0 -2px #b958ff}.compare-table thead .cc-zapier{box-shadow:inset 0 -2px #ff4f00}
.compare-table tbody th{font-weight:750;color:#9fc3ee;width:24%}
.compare-table td{color:#d5e2f4}
.compare-table tbody tr:nth-child(even){background:rgba(14,40,82,.35)}
/* "Pick this tool if…" cards (accent colour from the compare-<id> class) */
.pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.pick-card{padding:22px 20px 24px;border-radius:18px;background:linear-gradient(165deg,rgba(var(--c),.16),rgba(5,19,45,.75) 55%);border:1px solid rgba(var(--c),.45)}
.pick-head{display:flex;align-items:center;gap:12px}
.pick-head .gca-logo{width:48px;height:48px;flex:0 0 48px;border-radius:14px;box-shadow:none}
.pick-card h3{font-size:19px;line-height:1.35}
.pick-card ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pick-card li{position:relative;padding-inline-start:24px;font-size:15px;line-height:1.65;color:#d5e2f4}
.pick-card li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;font-weight:800;color:rgb(var(--c))}
.pick-card.compare-zapier li::before{color:#ff8a4c}
/* Choose your option */
.choose-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.choose-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px 20px;border-radius:18px;background:linear-gradient(160deg,#112b56,#07172e);border:1px solid #345787;transition:transform .3s,border-color .3s}
.choose-card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.choose-card:hover .choose-a .ico{translate:4px 0}
html[dir=rtl] .choose-card:hover .choose-a .ico{translate:-4px 0}
.choose-q{font-size:16.5px;font-weight:650;line-height:1.6;color:#eef4ff}
.choose-a{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:#7fe3f6}
/* Steps: a numbered path down the page */
.guide-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0}
.guide-step{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:20px;padding-bottom:34px}
.guide-step:not(:last-child)::before{content:"";position:absolute;top:50px;bottom:6px;inset-inline-start:22px;width:2px;background:linear-gradient(180deg,#3e8dff,rgba(62,141,255,.12))}
.gs-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:18px;font-weight:850;color:#021126;background:var(--grad);box-shadow:0 0 0 6px rgba(62,141,255,.12),0 10px 26px #0007}
.gs-body h3{font-size:21px;line-height:1.35;padding-top:9px}
.gs-body>p:first-of-type{margin-top:10px}
/* Command blocks (terminal look, always left-to-right) */
.code-block{direction:ltr;margin-top:18px;border-radius:14px;overflow:hidden;background:#020a18;border:1px solid #2b4a78;box-shadow:0 18px 40px #0006}
.code-head{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 14px;background:#0a1b38;border-bottom:1px solid #1f3a64}
.code-dots{display:inline-flex;gap:6px}
.code-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.code-dots i:nth-child(2){background:#febc2e}.code-dots i:nth-child(3){background:#28c840}
.code-label{font-family:var(--mono);font-size:11.5px;color:#7f9cc6;flex:1}
.copy-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #3d6aa8;background:#0f2a55;color:#e8f2ff;border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:750;cursor:pointer;transition:background .2s,border-color .2s}
.copy-btn .ico{width:15px;height:15px}
.copy-btn:hover{background:#163a72;border-color:var(--cyan)}
.copy-btn.is-copied{background:#0f4a3a;border-color:#3ddc97;color:#d5ffee}
.code-block pre{margin:0;padding:16px 18px;font-family:var(--mono);font-size:14.5px;line-height:1.7;color:#e6f3ff;white-space:pre-wrap;overflow-wrap:anywhere}
.code-block pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.code-block pre code::before{content:"› ";color:#31d8f0}
/* Windows / Mac */
.os-tabs{margin-top:16px}
.os-tablist{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:#071a37;border:1px solid #2d4772}
.os-tablist button{border:0;background:none;color:#a9bfdf;font-weight:750;font-size:14px;padding:7px 18px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
.os-tablist button[aria-selected=true]{background:linear-gradient(115deg,#20d9ec,#389efe 60%,#7f6bff);color:#021126}
.os-panel{margin-top:12px;padding:4px 18px 18px;border-radius:14px;background:rgba(9,27,57,.55);border:1px solid #233f69}
.os-label{font-size:12px!important;font-weight:800;color:#69c9e7!important;margin-top:14px!important}
.os-tabs.is-tabbed .os-label{display:none}
.os-panel>p:first-of-type,.os-panel>.guide-ol:first-child{margin-top:14px}
.os-tabs.is-tabbed .os-panel>p:nth-of-type(2){margin-top:14px}
/* Browser illustration */
.browser-mock{margin:22px 0 0}
.bm-frame{border-radius:14px;overflow:hidden;border:1px solid #31558a;box-shadow:0 22px 60px #0008;background:#f4f6fb}
.bm-bar{direction:ltr;display:flex;align-items:center;gap:14px;padding:9px 14px;background:#dfe4ee}
.bm-url{flex:1;max-width:340px;font-family:var(--mono);font-size:12.5px;color:#28324a;background:#fff;border-radius:20px;padding:4px 14px}
.bm-page{direction:ltr;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 20px 30px;color:#1d2433}
.guide-article .bm-page strong{font-size:17px;margin-bottom:4px;color:#1d2433}
.bm-field{width:min(260px,80%);height:30px;border-radius:7px;border:1px solid #cfd6e3;background:#fff}
.bm-btn{width:min(260px,80%);height:32px;border-radius:7px;background:#ea4b71;margin-top:4px}
.browser-mock figcaption{margin-top:10px;font-size:13px;color:#8fa7c6;text-align:center}
/* Collapsibles: command explainer and FAQ */
.explain,.faq-item{border-radius:14px;background:rgba(9,27,57,.6);border:1px solid #2d4772}
.explain{margin-top:16px}
.explain summary,.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;font-weight:750;font-size:15.5px;color:#e9f1ff;line-height:1.5}
.explain summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none}
.explain summary::after,.faq-item summary::after{content:"+";flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #3d6aa8;color:var(--cyan);font-size:18px;line-height:1;transition:transform .25s}
.explain[open] summary::after,.faq-item[open] summary::after{transform:rotate(45deg)}
.explain summary:hover,.faq-item summary:hover{color:#fff}
.explain-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.explain-table th,.explain-table td{padding:10px 18px;text-align:start;vertical-align:top;border-top:1px solid #1d3860}
.explain-table th{font-size:12px;color:#7fb6ea}
.explain-table td{color:#cfdcf0}
.explain-table td:first-child{width:44%}
.faq{display:grid;gap:10px;margin-top:22px}
.faq-a{padding:0 18px 16px}
.faq-a>p:first-child{margin-top:0}
.guide-article .faq-a p{font-size:16px}
/* Sources + closing call to action */
.guide-sources h2{font-size:24px}
.guide-sources ul{margin:16px 0 0;padding-inline-start:20px;color:#c4d5e9;line-height:2}
.guide-sources li::marker{color:#4b6f9f}
.guide-sources.guide-section{padding-bottom:0;border-bottom:0;margin-bottom:60px}
.guide-cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:48px 34px;border-radius:24px;background:radial-gradient(ellipse at 50% 0%,rgba(91,132,255,.3),transparent 65%),linear-gradient(160deg,#122f60,#06152f);border:1px solid #3e66a6}
.guide-cta .eyebrow{justify-content:center}
.guide-cta h2{font-size:clamp(26px,3vw,38px);margin-top:14px;text-wrap:balance}
.guide-cta p{max-width:560px;margin-inline:auto}
.guide-cta .button-row{justify-content:center;margin-top:26px}
/* Guides: responsive */
@media(max-width:1160px){.guide-layout{grid-template-columns:220px minmax(0,1fr);gap:40px}.guide-hero-grid{gap:36px}}
@media(max-width:970px){.pick-grid,.term-grid:has(>.term:nth-child(3):last-child){grid-template-columns:1fr}.guide-hero-grid{grid-template-columns:1fr}.guide-cover{max-width:440px;width:100%;margin-inline:auto}.guide-cover-card,html[dir=ltr] .guide-cover-card{transform:none}.guide-layout{grid-template-columns:1fr;gap:34px}.guide-toc{position:static}.guide-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}.guide-article{max-width:none}.compare-grid,.choose-grid{grid-template-columns:1fr}.mini-flow ol{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-flow li:nth-child(2)::after{display:none}.guide-grid{grid-template-columns:1fr}}
@media(max-width:650px){.guide-hero{padding-bottom:56px}.guide-hero .inside-copy h1{font-size:clamp(34px,9.5vw,46px)}.guide-facts li{min-width:0;flex:1 1 calc(50% - 10px)}.guide-cover-card{padding:26px 18px 22px;gap:16px}.guide-cover-mark strong{font-size:32px}.guide-body{padding-top:56px}.guide-toc ol{grid-template-columns:1fr}.guide-section{padding-bottom:60px;margin-bottom:60px}.guide-section-head{gap:14px}.guide-section-num{font-size:32px}.guide-article p{font-size:16px}.guide-list,.guide-ol{font-size:15.5px}.term-grid{grid-template-columns:1fr}.mini-flow ol{grid-template-columns:1fr;gap:18px}.mini-flow li{flex-direction:row;align-items:center}.mini-flow li:not(:last-child)::after,.mini-flow li:nth-child(2)::after{display:block;top:auto;bottom:-14px;inset-inline-start:26px;inset-inline-end:auto;width:2px;height:10px;background:linear-gradient(180deg,#31d8f0,#b958ff)}
 .guide-step{grid-template-columns:36px minmax(0,1fr);gap:14px;padding-bottom:28px}.gs-num{width:36px;height:36px;font-size:15px;box-shadow:0 0 0 5px rgba(62,141,255,.12)}.guide-step:not(:last-child)::before{top:40px;inset-inline-start:17px}.gs-body h3{font-size:18.5px;padding-top:5px}
 .code-block pre{font-size:13px;padding:14px}.code-label{display:none}.code-head{justify-content:space-between}.os-panel{padding:2px 14px 14px}
 .compare-table-wrap{border:0;background:none;border-radius:0}.compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:auto}.compare-table tr{margin-bottom:10px;border-radius:14px;border:1px solid #2d4772;background:#061733;overflow:hidden}.compare-table tbody tr:nth-child(even){background:#061733}.compare-table tbody th{width:auto;background:#0c2348;color:#fff;border-bottom:1px solid #1d3860}.compare-table td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:10px 16px}.compare-table td::before{content:attr(data-label);font-weight:750;font-size:13px;color:#8fb3e0}.compare-table tbody tr:last-child>*{border-bottom:1px solid #1d3860}.compare-table tbody tr>td:last-child{border-bottom:0}
 .explain-table thead{display:none}.explain-table,.explain-table tbody,.explain-table tr,.explain-table td{display:block;width:auto!important}.explain-table tr{padding:10px 16px;border-top:1px solid #1d3860}.explain-table td{padding:0;border:0}.explain-table td+td{margin-top:4px}
 .guide-cta{padding:38px 20px}.guide-card-body{padding:22px 20px 24px}.guide-card-art{min-height:160px}}
@media(prefers-reduced-motion:reduce){.guide-card,.compare-card,.choose-card,.guide-toc a,.copy-btn,.os-tablist button,.explain summary::after,.faq-item summary::after,.compare-link .ico,.choose-a .ico{transition:none!important}a.guide-card:hover,.compare-card:hover,.choose-card:hover{transform:none}.choose-card:hover .choose-a .ico{translate:none}}