:root{--navy:#061938;--deep:#071E45;--royal:#075BEA;--electric:#3694ff;--ice:#e8f3ff;--ink:#112747;--muted:#5d708d;--line:rgba(12,53,103,.11);--radius:24px;--ease:cubic-bezier(.22,1,.36,1);--container:1240px;--shadow:0 26px 82px rgba(6,30,70,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Alexandria,Tahoma,Arial,sans-serif;font-size:15px;line-height:1.95;overflow-x:hidden}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}::selection{background:#71bbff;color:#061938}.container{width:min(calc(100% - 80px),var(--container));margin-inline:auto}.skip{position:absolute;right:12px;top:-150px;background:#fff;padding:12px;z-index:9999}.skip:focus{top:12px}.site-header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .25s,box-shadow .25s;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-bottom:1px solid #dbe5f1}.site-header.is-scrolled{box-shadow:0 8px 36px rgba(3,26,56,.07)}.header-row{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:20px}.brand{white-space:nowrap;font-size:21px;font-weight:900;letter-spacing:-1.1px;direction:ltr;color:var(--navy)}.brand span{color:var(--royal)}.desktop-nav{display:flex;gap:clamp(12px,2vw,29px);align-items:center}.desktop-nav a{font-size:11px;font-weight:600;color:#49617f;transition:color .25s}.desktop-nav a:is(:hover,.active){color:var(--royal)}.header-cta{padding:13px 18px;color:white;border-radius:12px;background:var(--royal);font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 10px 24px #075bea24;transition:transform .3s var(--ease),box-shadow .3s}.header-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px #075bea44}.nav-toggle{display:none;border:1px solid #dbe8f7;border-radius:10px;background:white;padding:8px 13px;color:var(--navy)}.mobile-nav{display:none}.scroll-progress{height:3px;position:absolute;bottom:0;inset-inline-start:0;width:0%;background:linear-gradient(90deg,#00c6ff,var(--royal))}
.hero{position:relative;isolation:isolate;min-height:820px;padding:180px 0 130px;overflow:hidden}.hero.dark{background:radial-gradient(ellipse at 18% 58%,#164c9a 0%,transparent 36%),radial-gradient(ellipse at 66% 110%,#0d3277 0%,transparent 40%),linear-gradient(135deg,#05112c,#071e45 53%,#062a5d);color:white}.hero.light{background:radial-gradient(ellipse at 16% 32%,#d3e8ff 0%,transparent 44%),linear-gradient(120deg,#eff7ff,#f8fbff 60%,white);color:var(--navy)}.hero:after{content:'';position:absolute;bottom:0;right:0;left:0;height:100px;background:linear-gradient(to top,#ffffff06,transparent);pointer-events:none}.hero-mesh{position:absolute;inset:0;opacity:.27;pointer-events:none;background-image:linear-gradient(#b5dbff16 1px,transparent 1px),linear-gradient(90deg,#b5dbff16 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to left,#000,transparent 80%)}.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(30px,6vw,105px);position:relative;z-index:2}.hero-copy{max-width:690px}.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:700;color:var(--electric);font-size:12px;letter-spacing:.06em}.eyebrow:before{content:'';width:35px;height:2px;background:currentColor}.hero.light .eyebrow{color:var(--royal)}.hero h1{font-size:clamp(44px,4.85vw,79px);line-height:1.28;margin:28px 0 24px;font-weight:900;letter-spacing:-.055em}.hero h1 .blue{color:#53a9ff}.hero.light h1 .blue{color:#075bea}.hero-summary{font-size:clamp(13px,1.12vw,16px);line-height:2.35;max-width:610px;color:#c1d5f0}.hero.light .hero-summary{color:#516987}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;padding:14px 23px;border-radius:12px;font-size:12px;font-weight:800;min-height:49px;transition:transform .35s var(--ease),background .3s,box-shadow .3s}.btn:hover{transform:translateY(-3px)}.btn-primary{color:#fff;background:#075bea;box-shadow:0 12px 40px #075bea3d}.btn-primary:hover{box-shadow:0 17px 46px #075bea60}.btn-ghost{border-color:#ffffff54;color:white;background:#ffffff0c}.btn-ghost:hover{background:#ffffff23}.hero.light .btn-ghost{border-color:#bbcfe6;color:var(--navy);background:white}.hero-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:35px}.hero-tags span{display:inline-flex;color:#b4cde8;border:1px solid #ffffff24;border-radius:100px;padding:4px 12px;font-size:10px}.hero.light .hero-tags span{color:#386487;border-color:#c4dff5}.hero-art{position:relative;min-height:520px;display:flex;align-items:end;justify-content:center}.portrait-shell{position:absolute;bottom:-125px;left:0;right:0;height:660px;z-index:4;display:flex;align-items:end;justify-content:center;pointer-events:none}.portrait-shell img{height:min(100%,650px);max-width:none;width:auto;object-fit:contain;filter:drop-shadow(0 22px 34px #06112666);mask-image:linear-gradient(to bottom,#000 75%,transparent 99%);transform-origin:bottom center;animation:portrait-enter 1.1s var(--ease) both}.hero.light .portrait-shell img{filter:drop-shadow(0 24px 32px #123e7a29)}.orb{position:absolute;pointer-events:none;border-radius:50%}.orb.one{width:460px;height:460px;left:50%;top:37%;transform:translate(-50%,-50%);background:radial-gradient(circle,#227ee850 0%,#1356bb21 53%,transparent 72%);box-shadow:inset 0 0 0 1px #a5caff20,0 0 0 65px #88beff08,0 0 0 130px #4aa0ff09;animation:orb-pulse 7s ease-in-out infinite alternate}.orb.two{width:350px;height:350px;left:50%;top:38%;transform:translate(-50%,-50%);border:1px solid #b7d9ff42;box-shadow:0 0 0 30px #87baff08;animation:orb-spin 30s linear infinite}.hero.light .orb.one{background:radial-gradient(circle,#c1e3ff 0%,#b9d9ff42 45%,transparent 73%);box-shadow:0 0 0 65px #d2e7ff65,0 0 0 126px #e0f0ff76}.hero.light .orb.two{border-color:#8fbcf144}.glow-blur{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,45%),#4995ff14,transparent 68%);transition:opacity .4s;z-index:1}.float-tag{position:absolute;z-index:6;padding:13px 18px;border:1px solid #b0d5ff30;backdrop-filter:blur(14px);color:white;background:#0b3663ad;border-radius:14px;box-shadow:0 18px 35px #020e2738;font-size:12px;line-height:1.7;animation:float 6s ease-in-out infinite}.float-tag small{font-size:9px;display:block;color:#a3c7f1}.float-tag.top{top:60px;right:3%}.float-tag.bottom{bottom:50px;left:2%;animation-delay:-2s}.hero.light .float-tag{color:#10417c;background:#fffffff2;border-color:#d9e9fa;box-shadow:0 14px 40px #1c53951a}.hero.light .float-tag small{color:#628ab6}.scroll-hint{position:absolute;right:calc((100% - min(calc(100% - 80px),var(--container)))/2);bottom:29px;z-index:5;display:flex;gap:12px;align-items:center;color:#acc9e9;font-size:10px}.scroll-hint .line{width:1px;height:35px;background:linear-gradient(white,transparent);animation:line-down 2s ease-in-out infinite}.hero.light .scroll-hint{color:#6483a6}
.section{padding:110px 0;position:relative}.section-soft{background:#f3f8ff}.section-ink{background:#071b3e;color:#fff;overflow:hidden}.section-ink:before{content:'';position:absolute;width:650px;height:650px;border-radius:50%;top:-320px;left:-180px;background:radial-gradient(circle,#0d6ded42,transparent 69%)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:40px}.section-head>div{max-width:820px}.kicker{font-size:11px;color:var(--royal);font-weight:800;letter-spacing:.1em}.section h2{font-weight:850;font-size:clamp(31px,3.35vw,52px);line-height:1.5;letter-spacing:-.045em;margin:13px 0}.section p{color:var(--muted);font-size:13px;line-height:2.25}.section-ink p{color:#bdd0ed}.section-head .lead{max-width:570px;margin:12px 0 0}.section-head .side-note{font-size:11px;color:#7f97b7;max-width:250px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{background:#fff;border:1px solid #dfe9f5;border-radius:21px;padding:30px;box-shadow:0 18px 52px #0f40720a;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}.card:hover{transform:translateY(-7px);border-color:#b7d3fb;box-shadow:0 26px 63px #074b991a}.card.dark-card{background:#0b2b60;color:#fff;border-color:#25528a}.card.dark-card p{color:#bcd0ed}.card .icon{width:49px;height:49px;border-radius:14px;background:linear-gradient(135deg,#e0efff,#c6e0ff);display:grid;place-items:center;color:#1262c8;font-size:24px;margin-bottom:24px}.card h3{font-size:18px;margin:0 0 14px;line-height:1.6}.card p{font-size:12px;margin:0}.card a{text-decoration:underline;text-underline-offset:7px;font-weight:800;font-size:12px;color:var(--royal);display:inline-block;margin-top:20px}.card.dark-card a{color:#a4ceff}.proof-band{display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:24px;padding:28px 34px;background:linear-gradient(100deg,#0a2c64,#075bea);color:white}.proof-band strong{font-size:19px}.proof-band p{margin:6px 0;color:#c9ddff}.proof-band a{white-space:nowrap}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}.diagram{min-height:400px;display:flex;align-items:center;justify-content:center;position:relative}.diagram-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:460px;width:100%;transform:perspective(900px) rotateY(-6deg)}.diagram-tile{background:#fff;border:1px solid #d8e7fb;border-radius:20px;padding:26px 18px;min-height:130px;box-shadow:var(--shadow);transition:transform .5s var(--ease)}.diagram-tile:hover{transform:translateY(-9px) rotate(1deg)}.diagram-tile:nth-child(2){transform:translateY(26px)}.diagram-tile:nth-child(3){transform:translateY(-4px)}.diagram-tile b{display:block;font-size:14px;color:#10315d}.diagram-tile small{color:#6085b0;font-size:10px}.diagram-line{position:absolute;width:350px;height:350px;border:1px dashed #a8d1ff;border-radius:50%;z-index:-1;animation:orb-spin 34s linear infinite}.list-check{list-style:none;padding:0;display:grid;gap:14px;color:#456180;font-size:13px}.list-check li:before{content:'✓';color:#0866ec;font-weight:900;margin-left:11px}.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:38px}.quarter{background:#ffffff0c;border:1px solid #ffffff2c;border-radius:20px;color:#fff;text-align:right;padding:25px;transition:background .35s,transform .35s,border-color .35s}.quarter:hover,.quarter[aria-pressed=true]{background:#1454ab;border-color:#8fbfff7c;transform:translateY(-5px)}.quarter span{display:block;color:#8dbcf7;font-size:11px;margin-bottom:16px}.quarter b{display:block;font-size:17px;margin-bottom:9px}.quarter small{font-size:11px;color:#bfd7f7}.quarter-result{margin-top:25px;padding:25px 29px;background:#fff;color:var(--navy);border-radius:16px;min-height:115px}.quarter-result h3{font-size:17px;margin:0 0 9px}.quarter-result p{color:#506b90;margin:0}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}.step{border-top:2px solid #c1ddff;padding:22px 8px 8px}.step .num{font-size:30px;font-weight:900;color:#a5d0ff}.step b{display:block;font-size:14px;color:#163d75;margin:8px 0}.step p{font-size:11px;margin:0}.quote{border-right:4px solid #075bea;padding:12px 25px 12px 0;color:#264d7c;font-weight:600;font-size:22px;line-height:2}.portrait-about{position:relative;min-height:620px;display:flex;align-items:end;justify-content:center}.portrait-about img{position:relative;z-index:3;width:auto;max-width:100%;height:570px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 28px 40px #11448c2b);mask-image:linear-gradient(to bottom,#000 78%,transparent)}.portrait-about:before{content:'';position:absolute;inset:15% 7% 15%;border-radius:50%;background:radial-gradient(circle,#a9d7ff 0%,#d1e9ff 43%,transparent 68%);filter:blur(7px)}.portrait-about:after{content:'MEET THE STRATEGIST';position:absolute;bottom:50px;right:-2%;z-index:4;color:#075bea;font-size:11px;letter-spacing:.25em;writing-mode:vertical-rl}.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.feature{padding:27px;border:1px solid #dce9f8;background:white;border-radius:20px}.feature span{font-size:12px;color:#075bea;font-weight:800}.feature h3{font-size:17px}.feature p{font-size:12px}.file-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:21px}.file-tab{border:1px solid #ccdff5;background:white;color:#31557f;padding:12px 15px;border-radius:12px;font-size:11px;font-weight:800}.file-tab[aria-selected=true]{color:white;background:#075bea;border-color:#075bea}.file-panel{background:#fff;border:1px solid #d9e5f5;border-radius:23px;min-height:230px;padding:28px;box-shadow:var(--shadow)}.file-preview{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:24px}.file-symbol{display:grid;place-items:center;height:80px;background:#e8f2ff;border:1px solid #c8ddf6;border-radius:22px;color:#075bea;font-size:32px}.file-panel h3{margin:0 0 5px}.file-panel p{margin:0}.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq details{background:#fff;border:1px solid #dce8f6;border-radius:14px;padding:15px 20px}.faq summary{cursor:pointer;font-weight:700;color:#153b6e;font-size:13px}.faq details p{margin:12px 0 0;font-size:12px}.cta-section{background:linear-gradient(120deg,#051632,#0a3679);color:white;text-align:center}.cta-section h2{font-size:clamp(34px,4vw,60px);line-height:1.5}.cta-section p{color:#bed4f3;max-width:680px;margin:0 auto 28px}.site-footer{background:#05132f;color:#b0c7e3;padding:48px 0 26px}.footer-row{display:flex;justify-content:space-between;align-items:start;gap:35px}.site-footer .brand{color:white}.footer-links{display:flex;flex-wrap:wrap;gap:21px}.footer-links a{font-size:11px}.footer-small{border-top:1px solid #ffffff1d;padding-top:23px;margin-top:35px;font-size:10px;color:#708fb8;display:flex;justify-content:space-between;gap:30px}.in-view{opacity:1;transform:none}.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .9s var(--ease)}.js [data-reveal].in-view{opacity:1;transform:translateY(0)}.js [data-reveal][data-delay='1']{transition-delay:.09s}.js [data-reveal][data-delay='2']{transition-delay:.18s}.js [data-reveal][data-delay='3']{transition-delay:.27s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes portrait-enter{from{opacity:0;transform:translateY(52px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes orb-pulse{from{opacity:.65;scale:.94}to{opacity:1;scale:1.07}}@keyframes orb-spin{to{rotate:360deg}}@keyframes line-down{0%,100%{opacity:.4;transform:translateY(-5px)}50%{opacity:1;transform:translateY(5px)}}
@media(max-width:1100px){.desktop-nav{gap:14px}.desktop-nav a{font-size:10px}.hero h1{font-size:clamp(42px,5.4vw,68px)}.float-tag.top{right:-8%}.portrait-shell{height:590px}.hero-grid{gap:20px}}
@media(max-width:850px){.container{width:min(calc(100% - 42px),var(--container))}.header-row{min-height:70px}.desktop-nav{display:none}.nav-toggle{display:inline-flex;align-items:center;justify-content:center}.mobile-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#ffffffed;padding:20px 22px;border-bottom:1px solid #d9e7f8;box-shadow:0 25px 48px #082c6215;flex-direction:column;gap:5px}.mobile-nav.open{display:flex}.mobile-nav a{padding:12px 10px;font-size:13px;font-weight:600}.header-cta{margin-inline-start:auto;padding:10px 12px}.hero{padding:135px 0 80px;min-height:auto}.hero-grid,.split{grid-template-columns:1fr}.hero h1{font-size:clamp(42px,8vw,65px);max-width:710px}.hero-art{min-height:480px;max-width:600px;margin:auto;width:100%}.portrait-shell{bottom:-85px;height:550px}.float-tag.top{right:4%}.float-tag.bottom{bottom:65px}.scroll-hint{display:none}.section{padding:75px 0}.card-grid{grid-template-columns:repeat(2,1fr)}.timeline,.workflow{grid-template-columns:repeat(2,1fr)}.section-head{align-items:start}.portrait-about{min-height:490px}.portrait-about img{height:485px}}
@media(max-width:550px){.container{width:calc(100% - 34px)}.brand{font-size:18px}.header-cta{font-size:9px;padding:9px 10px;min-height:38px}.hero{padding-top:119px}.hero h1{font-size:clamp(38px,10vw,49px)}.hero-summary{font-size:12px}.hero-art{min-height:370px}.portrait-shell{bottom:-70px;height:435px}.portrait-shell img{height:440px}.orb.one{width:290px;height:290px;top:52%}.orb.two{width:240px;height:240px;top:52%}.float-tag{font-size:9px;padding:9px 12px}.float-tag.top{right:-3%;top:45px}.float-tag.bottom{bottom:12px;left:0}.hero-tags{margin-top:24px}.hero-actions{gap:9px}.btn{font-size:10px;padding:11px 15px}.section h2{font-size:31px}.section-head{display:block}.section .lead{font-size:12px}.card-grid,.feature-list,.faq{grid-template-columns:1fr}.timeline,.workflow{grid-template-columns:1fr 1fr}.quarter{padding:16px 12px}.quarter b{font-size:13px}.quarter small{font-size:10px}.proof-band{display:block}.proof-band a{margin-top:17px}.diagram{min-height:320px}.diagram-tile{padding:15px;min-height:105px}.diagram-tile b{font-size:12px}.portrait-about img{height:390px}.portrait-about{min-height:390px}.file-preview{grid-template-columns:1fr}.footer-row,.footer-small{display:block}.footer-links{margin-top:18px}.footer-small span{display:block;margin:8px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.js [data-reveal]{opacity:1!important;transform:none!important}.orb{animation:none!important}}
/* G1 responsive guard: prevent decorative orbital guides from stretching small viewports */
.diagram{overflow:hidden}
.diagram-line{width:min(92%,350px);height:auto;aspect-ratio:1}
@media(max-width:550px){.card-grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}}


/* V13 Pilot Revision — visual & motion architecture. Keep these effects shared across the pilot only. */
:root{--motion-fast:.22s;--motion-normal:.65s;--motion-slow:1.1s;--art-glow:rgba(72,169,255,.54)}
.hero.dark{background:radial-gradient(ellipse at 73% 36%,#1760ae35,transparent 40%),radial-gradient(ellipse at 0% 90%,#2463ac30,transparent 56%),linear-gradient(132deg,#06112b,#081d46 68%,#062b63)}
.hero.light{background:radial-gradient(ellipse at 80% 25%,#d0ecff,transparent 42%),linear-gradient(115deg,#f0f7ff,#fff 70%)}
.hero .hero-mesh{background-size:50px 50px;opacity:.48;mask-image:linear-gradient(to left,#0005,#000 56%,transparent 98%)}
.hero-copy h1{max-width:800px;letter-spacing:-.035em}
.hero-copy h1 .blue{background:linear-gradient(110deg,#8bdfff,#277ef9 55%,#2b94ee);color:transparent;background-clip:text;-webkit-background-clip:text;display:inline-block}
.hero.light .hero-copy h1 .blue{background:linear-gradient(120deg,#1261dc,#2a98ea);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero .hero-copy{position:relative;z-index:10}
.hero-art{isolation:isolate;overflow:visible}
.art-photo{min-height:610px;align-self:stretch;pointer-events:none;--shift-x:0px;--shift-y:0px;transform:translate3d(calc(var(--shift-x) * .14),calc(var(--shift-y) * .12),0);transition:transform .6s ease-out}
.art-photo:before{content:'';position:absolute;width:95%;aspect-ratio:1;max-width:590px;top:5%;left:3%;border-radius:50%;background:radial-gradient(circle,#2a8dff3f 0%,#144ca526 48%,transparent 69%);filter:blur(4px);animation:art-breathe 8s ease-in-out infinite alternate}
.art-photo.art-about:before{background:radial-gradient(circle,#7bc4ff94 0%,#bbdffe5c 50%,transparent 69%)}
.orbit-lines{width:min(100%,620px);height:auto;position:absolute;left:0;top:0;opacity:.55;overflow:visible;animation:orbit-nudge 24s linear infinite;transform-origin:50% 50%;pointer-events:none}
.orbit-lines circle{stroke:#84c6ff62;stroke-width:1;fill:none;stroke-dasharray:6 11}
.orbit-lines path{stroke:#6ec9eaa4;stroke-width:1.4;stroke-dasharray:16 9;fill:none}
.art-about .orbit-lines circle{stroke:#256ac048}.art-about .orbit-lines path{stroke:#0e67ac77}
.constellation-dot{width:5px;height:5px;position:absolute;background:#b6ecff;border-radius:50%;box-shadow:0 0 16px #a6efff;animation:art-breathe 3s ease-in-out infinite alternate}
.dot-a{top:9%;left:12%}.dot-b{top:26%;right:13%;animation-delay:-1s}.dot-c{bottom:19%;left:18%;animation-delay:-2s}
.art-about .constellation-dot{background:#226ab2;box-shadow:0 0 12px #66a4ef}
.portrait-shimmer{position:absolute;inset:10% 8% 0;z-index:1;background:radial-gradient(ellipse at center,#6bd3ff4b,transparent 63%);filter:blur(35px);animation:art-breathe 7s ease-in-out infinite alternate}
.wix-photo-wrap{position:absolute;z-index:4;inset:1% -3% -14%;display:flex;justify-content:center;align-items:end;overflow:hidden;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 98%)}
.wix-photo{height:99%;width:auto;max-width:97%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .9s ease-out,transform 1.4s cubic-bezier(.16,1,.3,1);transform:translateY(33px) scale(.97);filter:drop-shadow(0 24px 35px #020b2255)}
.wix-photo.is-ready{opacity:1;transform:translateY(0) scale(1)}
.art-about .wix-photo-wrap{inset:14% 0% -6%;mask-image:linear-gradient(to bottom,#000 5%,#000 70%,transparent 98%)}
.art-about .wix-photo{max-width:99%;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;mask-image:radial-gradient(ellipse 75% 77% at 50% 51%,#000 53%,transparent 100%);filter:drop-shadow(0 22px 36px #2c65aa33)}
.art-photo.has-photo .fallback-composition{opacity:.04}
.fallback-composition{position:absolute;z-index:2;top:26%;inset-inline:7%;height:53%;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .5s}
.fallback-big{font:900 clamp(90px,14vw,210px)/1 system-ui,sans-serif;letter-spacing:-.11em;color:#badfff25;white-space:nowrap}
.fallback-big span{color:#68ccffa6}.fallback-small{position:absolute;bottom:20px;left:14px;font:800 12px/1.8 monospace;letter-spacing:.22em;color:#8cbaf7;direction:ltr}
.art-about .fallback-big{color:#166abd22}.art-about .fallback-small{color:#16589d}
.photo-side-label{position:absolute;z-index:6;right:-10px;top:41%;font-size:10px;letter-spacing:.25em;color:#a9d2fb99;writing-mode:vertical-rl;direction:ltr}
.art-about .photo-side-label{color:#226eb87e}
.art-caption{position:absolute;z-index:7;bottom:9%;left:0;display:flex;align-items:center;gap:11px;color:#eff8ff;background:#062655d9;border:1px solid #70baff6e;border-radius:17px;padding:14px 18px;box-shadow:0 26px 55px #081a4750;backdrop-filter:blur(15px)}
.art-caption strong{font-size:13px}.art-caption small{font-size:10px;color:#9cbef2;direction:ltr}
.caption-indicator{width:8px;height:8px;background:#42e9d5;box-shadow:0 0 0 6px #42e9d51e,0 0 16px #4ae5ff;border-radius:50%;flex-shrink:0;animation:art-breathe 2.5s infinite alternate}
.art-about .art-caption{background:#ffffffeb;color:#0b3669;box-shadow:0 12px 40px #25598a31}.art-about .art-caption small{color:#2c72bc}
/* Annual Plan visual system: content-first, SVG is decor, labels are HTML */
.art-system{min-height:600px;align-self:stretch;display:grid;place-items:center;--shift-x:0px;--shift-y:0px;transform:translate3d(calc(var(--shift-x) * .12),calc(var(--shift-y) * .1),0);transition:transform .5s ease-out}
.system-halo{position:absolute;width:570px;max-width:114%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#1267c960,#1272dc1b 52%,transparent 70%);filter:blur(16px);animation:art-breathe 7s infinite alternate}
.system-graphic{position:relative;width:min(100%,540px);height:530px;transform-style:preserve-3d}
.system-overline{position:absolute;left:50%;transform:translateX(-50%);top:15px;white-space:nowrap;letter-spacing:.14em;color:#9dcdf4;font:700 10px/1.5 monospace;direction:ltr}
.system-overline span{color:#66e2ee}
.system-orbit{position:absolute;inset:35px 0 0;width:100%;height:460px;overflow:visible}
.system-path{fill:none;stroke:url(#system-path);stroke-width:2.3;stroke-dasharray:6 12;stroke-linecap:round;animation:system-dash 19s linear infinite;filter:drop-shadow(0 0 7px #83d5ff)}
.system-axis{fill:none;stroke:#83b7ff3d;stroke-width:1}
.system-satellite{fill:#59dfff;stroke:#8bd9ff;stroke-width:1.7;animation:art-breathe 4s alternate infinite}
.system-satellite circle+circle{fill:none;opacity:.55}
.sat-two{animation-delay:-1.4s}.sat-three{animation-delay:-2.7s}
.system-core{position:absolute;z-index:3;top:35%;left:50%;transform:translateX(-50%);width:190px;height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle at 45% 35%,#174d98,#071c46 79%);border:1px solid #90d2ff70;box-shadow:0 0 0 13px #55b7ff0d,inset 0 0 45px #69bfff28,0 0 38px #70b8ff20}
.system-core .core-icon{color:#87e2ff;font-size:26px;line-height:1.3}.system-core small{color:#8fc1f3;font-size:10px;letter-spacing:.16em}.system-core b{font-size:21px;color:#fff}.system-core em{font-style:normal;color:#a7c9ef;font-size:11px;margin-top:4px}
.system-node{position:absolute;z-index:4;padding:13px 17px;min-width:122px;display:flex;flex-direction:column;gap:3px;color:#fff;background:linear-gradient(140deg,#133d7eeb,#061936ef);border:1px solid #70baff75;border-radius:14px;box-shadow:0 15px 32px #06132865;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;animation:system-node-enter .9s backwards}
.system-node i{font:800 10px monospace;color:#77f7eb;font-style:normal}.system-node b{font-size:14px}.system-node small{font:700 9px monospace;color:#96bce7;direction:ltr}
.system-node:hover{transform:translateY(-8px) scale(1.02);border-color:#b8efff;background:#1457a2}
.node-research{top:18%;right:0;animation-delay:.25s}.node-strategy{top:19%;left:0;animation-delay:.39s}.node-plan{bottom:18%;right:0;animation-delay:.53s}.node-measure{bottom:17%;left:0;animation-delay:.67s}
.system-legend{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);font-size:11px;color:#b8d9f4;white-space:nowrap}
.legend-live{display:inline-block;vertical-align:middle;width:6px;height:6px;margin-left:8px;background:#5cf0d9;border-radius:50%;box-shadow:0 0 8px #5cf0d9}
/* About section 2: typography and journey diagram instead of second portrait */
.story-orbit{min-height:480px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 50%,#eaf5ff,transparent 66%)}
.story-orbit-path{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.story-orbit-path path{fill:none;stroke:#3987de;stroke-width:1.5;stroke-dasharray:9 14;animation:system-dash 16s linear infinite}
.story-orbit-label{position:absolute;top:15px;color:#1a6aca;font:700 10px monospace;letter-spacing:.13em;direction:ltr}
.story-orbit-center{width:185px;height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;background:radial-gradient(circle at 35% 30%,#205baf,#0a2855);border-radius:50%;border:10px solid #ffffffa6;box-shadow:0 25px 55px #1558b034}
.story-orbit-center span{font:800 34px monospace;color:#94d6ff}.story-orbit-center b{font-size:17px}
.story-orbit-stage{position:absolute;border:1px solid #c5def8;background:#fffffff1;box-shadow:0 12px 28px #1a69bd12;border-radius:12px;padding:12px 17px;color:#0b4079;font-weight:800;font-size:12px;white-space:nowrap;animation:float 7s ease-in-out infinite}
.story-orbit-stage span{color:#137ae8;margin-left:10px;font:800 12px monospace}
.stage-two{top:21%;right:8%}.stage-three{top:33%;left:6%;animation-delay:-1.2s}.stage-four{bottom:21%;left:19%;animation-delay:-2.1s}
/* Structural interactive motion */
.card,.diagram-tile,.feature,.step,.quarter,.file-panel{position:relative;isolation:isolate}
.card:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(350px circle at var(--hover-x,50%) var(--hover-y,50%),#79b8ff18,transparent 70%);pointer-events:none;opacity:0;transition:opacity .5s}
.card:hover:before{opacity:1}
.card:hover .icon{transform:rotate(-8deg) scale(1.08)}.card .icon{transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}
.diagram{perspective:950px}.diagram-grid{transition:transform .8s ease}.diagram:hover .diagram-grid{transform:perspective(900px) rotateY(0deg) rotateX(3deg)}
.section-head .kicker:before{content:'';display:inline-block;width:15px;height:1px;background:currentColor;vertical-align:middle;margin-left:9px}
.section-head h2{transition:letter-spacing .4s}.section-head:hover h2{letter-spacing:.01em}
.section .btn{position:relative;overflow:hidden}.section .btn:after,.hero .btn:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,#ffffff44 48%,transparent 80%);transform:translateX(155%) skewX(-15deg);transition:transform .8s;pointer-events:none}.section .btn:hover:after,.hero .btn:hover:after{transform:translateX(-165%) skewX(-15deg)}
.js [data-reveal]{transform:translate3d(0,35px,0);filter:blur(3px);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .75s ease,filter .8s ease}
.js [data-reveal].in-view{filter:blur(0);transform:translate3d(0,0,0)}
[data-draw-path]{stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1)}
.in-view [data-draw-path],[data-draw-path].in-view{stroke-dashoffset:0}
@keyframes art-breathe{from{opacity:.6;scale:.96}to{opacity:1;scale:1.03}}
@keyframes orbit-nudge{to{rotate:360deg}}
@keyframes system-dash{to{stroke-dashoffset:-500}}
@keyframes system-node-enter{from{opacity:0;filter:blur(5px);translate:0 24px}to{opacity:1;filter:blur(0);translate:0 0}}
@media(max-width:1100px){.art-photo,.art-system{min-height:520px}.wix-photo-wrap{inset:2% 0 -12%}.system-graphic{scale:.91}}
@media(max-width:850px){.art-photo{min-height:520px;max-width:660px}.wix-photo-wrap{inset:0 0 -8%}.hero-art.art-system{min-height:580px}.system-graphic{scale:1}}
@media(max-width:550px){.hero .hero-grid{gap:0}.art-photo{min-height:370px}.wix-photo-wrap{inset:0 -1% -12%}.art-caption{left:6px;bottom:0;padding:8px 11px;gap:7px}.art-caption strong{font-size:10px}.art-caption small{font-size:8px}.photo-side-label{right:0;font-size:8px}.orbit-lines{top:0;width:100%}.art-about .wix-photo-wrap{inset:12% -2% -9%}.hero-art.art-system{min-height:450px;overflow:visible;margin-inline:-10px}.system-graphic{height:470px;scale:.76;width:510px;max-width:none;transform-origin:50% 50%}.system-halo{max-width:115%;width:430px}.story-orbit{min-height:350px}.story-orbit-center{width:145px;height:145px}.story-orbit-stage{font-size:9px;padding:9px}.stage-two{right:1%}.stage-three{left:0}.stage-four{left:9%}}
@media(max-width:370px){.system-graphic{scale:.65}.hero-art.art-system{min-height:420px}.art-photo{min-height:330px}.photo-side-label{display:none}.art-caption{bottom:2px}}
@media(hover:none){.card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.orbit-lines,.art-photo:before,.portrait-shimmer,.constellation-dot,.system-halo,.system-path,.system-satellite,.system-node,.story-orbit-path path,.story-orbit-stage,.caption-indicator{animation:none!important}.art-photo,.art-system{transform:none!important}.wix-photo.is-ready{opacity:1!important;transform:none!important}.js [data-reveal]{filter:none!important;opacity:1!important;transform:none!important}}
/* Explicit narrow-screen containment for the system diagram (no 510px intrinsic grid track). */
@media(max-width:550px){
  .hero-art.art-system{display:block;position:relative;overflow:hidden;min-width:0;width:100%;max-width:100%;}
  .system-graphic{position:absolute;top:0;left:50%;transform:translateX(-50%);width:510px;max-width:none;transform-origin:50% 0;scale:.72;}
}
@media(max-width:370px){.system-graphic{scale:.58}}

/* V13 Content Restoration -- add only (content markup is tracked separately). */
.narrative-panel .editorial-grid,.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:27px}.editorial-grid.compact{grid-template-columns:1fr;gap:9px}.editorial-item{min-width:0;border-block-start:1px solid #b6cfee;padding:19px 5px 9px}.editorial-item>span,.floating-note>span,.case-num{font-size:11px;letter-spacing:.1em;font-weight:750;color:#2874dc}.editorial-item h3{font-size:clamp(17px,2vw,22px);line-height:1.5;color:#092454;margin:13px 0 10px}.editorial-item p{font-size:14px;line-height:2;color:#455f81;margin:0}.source-note{border-right:3px solid #2b77ed;padding:16px 20px;margin-top:25px;background:rgba(45,111,235,.06);color:#294a74;line-height:2;border-radius:10px}.principle-list{display:grid;gap:0;margin-top:24px}.principle{display:grid;grid-template-columns:55px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid #dce8f5}.principle>strong{color:#2874dc}.principle h3{margin:0 0 5px;color:#092454;font-size:20px}.principle p{margin:0;line-height:1.9;color:#466082}.floating-note{position:relative;padding:clamp(25px,5vw,54px);border-block-start:2px solid #2c7af6;background:linear-gradient(150deg,#ebf4ff,rgba(245,249,255,.25));border-radius:17px}.floating-note strong{display:block;font-size:clamp(20px,3vw,28px);color:#08234c;line-height:1.7;margin-top:15px}.trust-strip{padding-top:54px;padding-bottom:55px}.brand-names{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.brand-names span{padding:12px 17px;border:1px solid #dae7f7;border-radius:99px;background:#fff;color:#113b70;font-size:13px}.text-link{color:#075bea;font-weight:750}.faq-list{max-width:970px;margin-inline:auto}.faq-list details{border-bottom:1px solid #d5e5f6;padding:16px 7px}.faq-list summary{cursor:pointer;font-size:17px;font-weight:750;color:#102e5c;line-height:1.6}.faq-list p{color:#506a8b;line-height:2}.case-addition{padding:62px 0;background:#fff;color:#15335f}.case-addition.case-soft{background:#f2f7fe}.case-chapter{max-width:1030px;margin-inline:auto}.case-chapter h2{font-size:clamp(23px,3vw,39px);font-weight:800;line-height:1.6;color:#0a2c61;margin:14px 0 16px}.case-chapter p{max-width:880px;font-size:15px;line-height:2.05;color:#476182}.case-chapter strong{color:#0b4ea5}.case-tags{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.case-tags span{border:1px solid #c7ddfb;padding:9px 13px;border-radius:99px;color:#17518a;font-size:12px}.case-inline-link{display:inline-block;margin-top:10px;color:#075bea;font-weight:750}.case-addition .v9-shell{width:min(1140px,calc(100% - 48px));margin:auto}
@media(max-width:700px){.editorial-grid{grid-template-columns:1fr}.editorial-item{padding:14px 3px}.source-note{padding:12px 15px}.case-addition{padding:42px 0}.case-addition .v9-shell{width:calc(100% - 32px)}.brand-names{gap:7px}.brand-names span{font-size:11px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.editorial-item,.principle,.case-chapter,.floating-note{transition:none!important}}

/* A06: site copy and conversion links must never wait for intersection observers. */
.js [data-reveal],.js [data-reveal].in-view,.js [data-reveal][data-delay]{opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important;transition:none!important;transition-delay:0s!important}
/* Avoid constantly spinning, pulsing, and floating decorative artwork. */
.orb,.float-tag,.scroll-hint .line,.diagram-line,.art-photo::before,.orbit-lines,.constellation-dot,.portrait-shimmer,.caption-indicator,.system-halo,.system-path,.system-satellite,.system-node,.story-orbit-path path,.story-orbit-stage{animation:none!important;animation-delay:0s!important}
.system-node{opacity:1!important;filter:none!important;translate:0 0!important}
/* Keep short state changes rather than attention-seeking motion. */
.header-cta:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Editorial example: clarify scope with a calm inline panel. */
.editorial-example{margin:24px 0;padding:22px;border-radius:18px;border:1px solid #cbdff7;border-right:4px solid #075bea;background:#f5f9ff;min-width:0}
.editorial-example-kicker{display:block;color:#075bea;font-size:11px;font-weight:700;margin-bottom:10px}
.editorial-example h3{font-size:clamp(18px,2vw,23px);line-height:1.65;color:#102b55;margin:0 0 10px}
.editorial-example p{font-size:14px;line-height:2;color:#496381;margin:0}

/* segment */
/* V15 — restore purposeful, gentle hero motion on Home / About.
   Previous A06 rule turned all decorative animation off globally. Copy and CTAs
   remain visible immediately; only atmospheric graphics move. */
@media(prefers-reduced-motion:no-preference){
 body .hero .hero-mesh{
  animation:nav-mesh-drift 32s linear infinite!important;
  will-change:background-position;
 }
 body .hero .glow-blur{
  animation:nav-glow-breathe 10s ease-in-out infinite!important;
 }
 body .hero .hero-art.art-photo .orbit-lines{
  animation:nav-orbit-turn 78s linear infinite!important;
  transform-origin:50% 50%;
 }
 body .hero .hero-art.art-photo .constellation-dot{
  animation:nav-star-breathe 7s ease-in-out infinite!important;
 }
 body .hero .hero-art.art-photo .constellation-dot:nth-child(2){animation-delay:-2.3s!important}
 body .hero .hero-art.art-photo .constellation-dot:nth-child(3){animation-delay:-4.7s!important}
 body .hero .hero-art.art-photo .caption-indicator{
  animation:nav-star-breathe 5s ease-in-out infinite!important;
 }
 body .hero .hero-art.art-system .system-halo{
  animation:nav-halo-breathe 14s ease-in-out infinite!important;
 }
}
@keyframes nav-mesh-drift{from{background-position:0 0,0 0}to{background-position:70px 40px,-70px 50px}}
@keyframes nav-glow-breathe{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes nav-orbit-turn{to{transform:rotate(360deg)}}
@keyframes nav-star-breathe{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes nav-halo-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media(max-width:650px){
 body .hero .hero-art.art-photo .orbit-lines{animation:none!important}
 body .hero .hero-mesh{will-change:auto}
}
@media(prefers-reduced-motion:reduce){
 body .hero .hero-mesh,body .hero .glow-blur,body .hero .hero-art .orbit-lines,
 body .hero .hero-art .constellation-dot,body .hero .hero-art .caption-indicator,
 body .hero .hero-art .system-halo{animation:none!important;will-change:auto!important}
}

/* segment */
/*
 * Abdulrahman NAV — Home / Glass Motion V1
 * Visual-only enhancement. Do not change source body copy, routes or shared layouts.
 * Loaded after the original index CSS and motion overrides.
 * 2026-10-27
 */
:root {
  --glass-ink:#122b52;
  --glass-muted:#536b8c;
  --glass-edge:rgba(255,255,255,.74);
  --glass-blue:#1165e8;
  --glass-surface:rgba(255,255,255,.65);
  --glass-shadow:0 24px 66px rgba(37,90,159,.095),inset 0 1px 0 rgba(255,255,255,.75);
}
html {scroll-padding-top:106px;}
body {
  background:#f7fbff;
  color:var(--glass-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* A floating navigational glass layer rather than an opaque site-wide bar. */
.site-header {
  top:12px;
  left:clamp(12px,2.7vw,38px);
  right:clamp(12px,2.7vw,38px);
  border:1px solid rgba(255,255,255,.82);
  border-radius:21px;
  background:rgba(247,251,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  box-shadow:0 12px 48px rgba(25,72,137,.11),inset 0 1px 1px rgba(255,255,255,.85);
}
.site-header.is-scrolled {
  background:rgba(247,251,255,.91);
  box-shadow:0 15px 56px rgba(20,66,131,.16);
}
.header-row {min-height:70px;gap:clamp(10px,1.5vw,24px);}
.desktop-nav a {font-size:clamp(11px,.82vw,12px);color:#3b577d;position:relative;padding:6px 0;}
.desktop-nav a::after {
  content:"";position:absolute;inset-inline:0;bottom:-5px;height:2px;border-radius:99px;
  transform:scaleX(0);transform-origin:right;
  background:linear-gradient(90deg,#57baff,#105ee6);
  transition:transform .3s ease;
}
.desktop-nav a:hover::after,.desktop-nav a.active::after {transform:scaleX(1);}
.header-cta {
  border:1px solid rgba(255,255,255,.45);
  border-radius:13px;
  background:linear-gradient(125deg,#2789f7,#0757d4);
  box-shadow:0 8px 24px rgba(10,95,222,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
.scroll-progress {bottom:-1px;border-radius:99px;background:linear-gradient(90deg,#83d8ff,#1364eb);}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #126dea;outline-offset:4px;
}

/* Hero: light, immersive, but never at the expense of contrast. */
.hero.dark {
  color:var(--glass-ink);
  background:
    radial-gradient(ellipse 54% 70% at 8% 42%,rgba(157,205,255,.46),transparent 72%),
    radial-gradient(ellipse 48% 68% at 94% 10%,rgba(184,216,255,.58),transparent 72%),
    linear-gradient(140deg,#f9fcff 0%,#f1f8ff 45%,#e8f3ff 100%);
}
.hero {
  min-height:760px;
  padding:clamp(154px,15vw,193px) 0 clamp(90px,11vw,125px);
}
.hero::before {
  content:"";position:absolute;inset:-20% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 20% 45%,rgba(92,167,247,.16),transparent 32%),
    radial-gradient(circle at 75% 33%,rgba(162,124,248,.11),transparent 37%),
    radial-gradient(circle at 46% 78%,rgba(57,183,239,.17),transparent 33%);
  background-size:125% 125%;filter:blur(24px);
  animation:glass-ambient-drift 24s ease-in-out infinite alternate;
}
.hero::after {height:125px;background:linear-gradient(to top,#f7fbff,transparent);}
.hero .hero-mesh {opacity:.4;mix-blend-mode:multiply;mask-image:linear-gradient(to left,#000,transparent 90%);}
.hero .glow-blur {opacity:.9;background:radial-gradient(520px circle at var(--mouse-x,55%) var(--mouse-y,45%),rgba(61,144,242,.13),transparent 75%);}
.hero-grid {gap:clamp(28px,4.5vw,70px);grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);}
.hero-copy {max-width:680px;}
.hero .eyebrow {
  color:#1456b5;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.92);
  padding:6px 16px;border-radius:100px;box-shadow:0 7px 26px rgba(32,91,170,.08);
  letter-spacing:0;
}
.hero .eyebrow:before {width:7px;height:7px;border-radius:50%;background:#2787ff;box-shadow:0 0 0 4px #2787ff22;}
.hero h1 {
  font-size:clamp(43px,5.1vw,77px);
  letter-spacing:-.055em;line-height:1.35;
  margin:22px 0;
  color:#0b2850;
  text-wrap:balance;
}
.hero .hero-copy h1 .blue {
  background:linear-gradient(110deg,#0757d5,#198bf2 72%,#2ea7f1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .hero-summary {
  max-width:590px;color:#425e82;font-size:clamp(14px,1.13vw,16px);
  line-height:2.15;letter-spacing:0;
  text-wrap:pretty;
}
.hero-actions {margin-top:28px;gap:13px;}
.btn {
  border-radius:15px;
  min-height:52px;padding:14px 23px;
  font-size:clamp(12px,.92vw,14px);
  box-shadow:none;
}
.btn-primary {
  background:linear-gradient(125deg,#2384f5 0%,#0755d7 88%);
  color:#fff;
  box-shadow:0 13px 31px rgba(12,93,218,.24),inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-primary:hover {box-shadow:0 18px 40px rgba(16,90,202,.29);}
.hero.dark .btn-ghost {
  color:#164476;
  border-color:rgba(174,209,247,.82);
  background:rgba(255,255,255,.75);
  box-shadow:0 7px 26px rgba(30,90,170,.06);
}
.hero.dark .btn-ghost:hover {background:rgba(255,255,255,.94);}
.hero-tags {gap:9px;margin-top:28px;}
.hero.dark .hero-tags span {
  color:#33638e;background:rgba(255,255,255,.64);
  border:1px solid rgba(164,201,239,.58);
  padding:6px 12px;font-size:clamp(10px,.72vw,11px);
}
.hero-art.art-photo {
  min-width:0;
  filter:drop-shadow(0 25px 44px rgba(47,100,174,.075));
}
.hero-art.art-photo::after {
  content:"";position:absolute;z-index:0;
  top:13%;left:9%;right:9%;bottom:3%;border-radius:45% 50% 28% 28%;
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(151,204,255,.18));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 #fff,0 22px 75px #4b9de51a;
  pointer-events:none;
  animation:glass-portrait-aura 10s ease-in-out infinite alternate;
}
.hero .wix-photo-wrap {z-index:4;}
.hero .wix-photo {filter:drop-shadow(0 26px 34px rgba(29,70,127,.17));}
.hero .art-caption {
  color:#163e72;background:rgba(250,253,255,.78);
  border:1px solid rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 15px 45px rgba(45,96,165,.15);
  border-radius:18px;
}
.hero .art-caption small {color:#3e73aa;}
.hero .photo-side-label {color:#2d6ca9;}
.hero .scroll-hint {color:#547baa;}
.hero .scroll-hint .line {background:linear-gradient(#368cf2,transparent);}

/* One cohesive canvas: sections remain in the same DOM order. */
main .section {
  padding-block:clamp(76px,7vw,112px);
  background:
    radial-gradient(ellipse 60% 110% at 92% 6%,rgba(204,226,254,.24),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.64),rgba(248,251,255,.8));
  color:var(--glass-ink);
  overflow:hidden;
}
main .section.section-soft {
  background:
    radial-gradient(ellipse 48% 90% at 10% 45%,rgba(163,210,255,.2),transparent 75%),
    linear-gradient(140deg,#edf6ff,#f8fbff 73%);
}
main .section.section-ink {
  color:var(--glass-ink);
  background:
    radial-gradient(ellipse 42% 100% at 80% 8%,rgba(131,190,252,.28),transparent 74%),
    linear-gradient(135deg,#e7f3ff,#f7fbff);
}
main .section.section-ink::before {
  top:-180px;left:-170px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(56,126,238,.12),transparent 68%);
}
.section .container {position:relative;z-index:1;}
.section .kicker {color:#226acc;letter-spacing:.07em;}
.section .section-head {gap:22px;margin-bottom:36px;align-items:end;}
.section .section-head>div {max-width:780px;}
.section h2 {
  color:#102b52;
  font-size:clamp(30px,3.1vw,48px);
  line-height:1.55;
  letter-spacing:-.035em;
  margin-block:8px 18px;
  text-wrap:balance;
}
.section h2 .blue,.section h2 span[style*="color:#075bea"] {color:#1168e9!important;}
.section p,.section-ink p {
  color:#506987;
  font-size:clamp(13px,1vw,15px);
  line-height:2.1;text-wrap:pretty;
}
.section .section-head .lead {max-width:720px;}
.section .split {gap:clamp(26px,5vw,76px);}
.section .split>div {min-width:0;}
.section .split>div:first-child>p {max-width:620px;}
.section .list-check {font-size:clamp(13px,1vw,15px);line-height:2;}
.section .list-check li {padding-bottom:4px;}
.section .source-note {
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.72);
  border-right:3px solid #3889e9;
  border-radius:12px;padding:12px 16px;
}

/* Translucent glass cards; text stays opaque and legible. */
.section .card,.section .card.dark-card,
.section .diagram-tile,.section .editorial-item,
.section .faq-list details {
  color:#18355b;
  background:linear-gradient(140deg,rgba(255,255,255,.78),rgba(244,250,255,.58));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--glass-shadow),0 0 0 1px rgba(110,169,230,.11);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}
.section .card {
  border-radius:23px;padding:clamp(23px,2.7vw,36px);
}
.section .card.dark-card h3,.section .card h3 {
  color:#143760;font-size:clamp(17px,1.4vw,21px);
  line-height:1.65;margin-bottom:12px;text-wrap:balance;
}
.section .card.dark-card p,.section .card p {color:#58708f;font-size:clamp(12px,.98vw,14px);line-height:2;}
.section .card.dark-card a,.section .card a {color:#0962db;font-size:clamp(12px,.88vw,13px);}
.section .card .icon {
  background:linear-gradient(140deg,rgba(213,234,255,.92),rgba(247,251,255,.91));
  border:1px solid rgba(255,255,255,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 10px 22px #2879d31a;
  border-radius:16px;
}
.section .card,.section .diagram-tile,.section .editorial-item {
  transition:transform .55s cubic-bezier(.2,.85,.15,1),
    box-shadow .5s ease,border-color .5s ease,background .5s ease;
}
.section .card:hover {
  transform:translateY(-7px);
  background:rgba(255,255,255,.9);
  border-color:#b7d9fe;
  box-shadow:0 32px 75px rgba(23,103,212,.16),inset 0 1px 0 #fff;
}
.section .card::after,.section .diagram-tile::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.42) 45%,transparent 60%);
  background-size:240% 100%;background-position:100% 0;
  transition:background-position .85s ease;
}
.section .card:hover::after,.section .diagram-tile:hover::after {background-position:0 0;}
.section .card-grid {gap:clamp(15px,1.8vw,25px);}
.section .card-grid .card {min-width:0;}
.section .brand-names {gap:12px;margin-block:26px 19px;}
.section .brand-names span {
  color:#245280;background:rgba(255,255,255,.69);
  border:1px solid rgba(255,255,255,.92);
  border-radius:15px;padding:13px 21px;
  box-shadow:0 10px 32px rgba(41,104,182,.075);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s ease,box-shadow .3s ease;
}
.section .brand-names span:hover {transform:translateY(-3px);box-shadow:0 14px 36px #236ac31b;}
.section .text-link {font-weight:700;color:#115ed1;}

/* The diagrams now match the glass cards; remove skewed text for easier reading. */
.section .diagram {isolation:isolate;}
.section .diagram-grid {
  max-width:500px;gap:15px;transform:none;
}
.section .diagram:hover .diagram-grid {transform:none;}
.section .diagram-tile {
  border-radius:21px;min-height:130px;
  padding:clamp(18px,2vw,27px) clamp(16px,1.7vw,23px);
}
.section .diagram-tile:nth-child(2),.section .diagram-tile:nth-child(3) {transform:none;}
.section .diagram-tile:hover,
.section .diagram-tile:nth-child(2):hover,
.section .diagram-tile:nth-child(3):hover {
  transform:translateY(-6px);
  box-shadow:0 27px 65px #2865b71f;
}
.section .diagram-tile b {color:#153e6b;font-size:clamp(12px,1.1vw,15px);}
.section .diagram-tile small {color:#2770bc;font-size:11px;}
.section .diagram-line {border-color:rgba(51,137,239,.25);}
.section .editorial-item {border-radius:18px;padding:21px;}
.section .editorial-item h3 {color:#163b67;}

/* Social proof band becomes an illuminated glass feature. */
.section .proof-band {
  position:relative;isolation:isolate;
  background:linear-gradient(115deg,rgba(16,102,212,.92),rgba(60,143,239,.92));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 26px 65px rgba(28,103,201,.2),inset 0 1px 0 #ffffff66;
  border-radius:25px;padding:clamp(25px,3vw,42px);
  overflow:hidden;
}
.section .proof-band::before {
  content:"";position:absolute;inset:-70% 45% -70% -30%;z-index:-1;
  background:radial-gradient(circle,rgba(235,248,255,.27),transparent 66%);
  animation:glass-feature-wave 13s ease-in-out infinite alternate;
}
.section .proof-band strong {font-size:clamp(17px,1.5vw,23px);line-height:1.65;}
.section .proof-band p {color:#f0f7ff;}
.section .proof-band .btn-ghost {
  color:#fff;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.63);
}
.section .proof-band .btn-ghost:hover {background:rgba(255,255,255,.29);}

/* FAQ: distinct glass rows, more visible click targets. */
.section .faq-list {display:grid;gap:12px;max-width:1010px;}
.section .faq-list details {
  padding:17px clamp(18px,2.5vw,29px);
  border-radius:18px;
}
.section .faq-list summary {font-size:clamp(14px,1.25vw,17px);color:#163e69;}
.section .faq-list details[open] {background:rgba(255,255,255,.94);box-shadow:0 18px 42px #2365b119;}
.section .faq-list p {margin-bottom:4px;}

/* A luminous end-cap, distinct from the reading sections. */
main .section.cta-section {
  color:#fff;text-align:center;
  background:radial-gradient(ellipse at 20% 6%,rgba(125,192,255,.42),transparent 45%),
    radial-gradient(ellipse at 94% 100%,rgba(93,146,255,.29),transparent 48%),
    linear-gradient(115deg,#0b3276,#1269d6 95%);
}
.section.cta-section .container {
  padding:clamp(23px,3vw,36px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:29px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 #ffffff44,0 25px 70px #001e5752;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.section.cta-section h2 {color:#fff;margin-inline:auto;max-width:900px;}
.section.cta-section p {color:#e9f4ff;}
.section.cta-section .kicker {color:#c2e5ff!important;}
.section.cta-section .btn-primary {
  background:linear-gradient(140deg,#ffffff,#e8f5ff);color:#1155ac;
  box-shadow:0 14px 32px #002d6e36;
}

/* Subtle purposeful motion: atmospheric backgrounds, not relentless moving text. */
@keyframes glass-ambient-drift {
  0% {transform:translate3d(-2%,0,0) scale(1);}
  50% {transform:translate3d(3%,-2%,0) scale(1.045);}
  100% {transform:translate3d(-1%,3%,0) scale(1.01);}
}
@keyframes glass-portrait-aura {
  from {transform:translateY(2px) scale(.98);opacity:.75;}
  to {transform:translateY(-9px) scale(1.025);opacity:1;}
}
@keyframes glass-feature-wave {
  to {transform:translateX(21%);}
}
@keyframes glass-headline-enter {
  /* Never hide copy: tests and keyboard users must see the title on first paint. */
  from {opacity:1;translate:0 13px;filter:none;}
  to {opacity:1;translate:0 0;filter:none;}
}
@media (prefers-reduced-motion:no-preference) {
  .hero .hero-copy h1 {animation:glass-headline-enter .95s cubic-bezier(.2,.9,.2,1) both;}
  .hero .hero-copy .hero-summary {animation:glass-headline-enter 1s .16s ease-out both;}
  .hero .hero-actions {animation:glass-headline-enter .85s .28s ease-out both;}
  .hero-art .art-caption {animation:glass-portrait-aura 8s ease-in-out infinite alternate;}
  @supports (animation-timeline:view()) {
    .section .brand-names span,.section .card .icon,.section .diagram-tile small {
      animation:glass-headline-enter .75s both;
      animation-timeline:view();
      animation-range:entry 0% cover 28%;
    }
  }
}
@media (max-width:1100px) {
  .site-header {top:9px;left:15px;right:15px;}
  .header-row {min-height:67px;}
  .hero {padding-top:145px;}
  .hero-grid {gap:25px;}
}
@media (max-width:850px) {
  .hero {min-height:0;padding:145px 0 78px;}
  .hero-grid {grid-template-columns:1fr;gap:18px;}
  .hero-copy {max-width:700px;}
  .hero h1 {font-size:clamp(40px,7.5vw,62px);}
  .hero-art.art-photo {min-height:500px;max-width:630px;}
  .section .section-head {align-items:start;}
  .section .split {gap:32px;}
  .section .card-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .section .card-grid .card:last-child:nth-child(odd) {grid-column:1/-1;}
}
@media (max-width:600px) {
  .site-header {top:8px;right:9px;left:9px;border-radius:16px;}
  .header-row {min-height:62px;}
  .brand {font-size:18px;}
  .header-cta {padding:10px 12px;font-size:10px;}
  .nav-toggle {border:1px solid #c7ddf8;background:rgba(255,255,255,.67);}
  .mobile-nav {
    background:rgba(249,252,255,.96);
    border-radius:0 0 14px 14px;
    border-top:1px solid rgba(204,225,251,.7);
  }
  .hero {padding-top:126px;padding-bottom:62px;}
  .hero h1 {font-size:clamp(34px,9vw,47px);line-height:1.45;margin:16px 0;}
  .hero .hero-summary {font-size:13px;line-height:2.05;}
  .hero .eyebrow {font-size:10px;padding:5px 10px;}
  .hero .hero-actions {display:grid;grid-template-columns:1fr 1fr;}
  .hero .btn {min-height:48px;min-width:0;padding:10px 8px;font-size:11px;line-height:1.6;}
  .hero .hero-tags {margin-top:23px;}
  .hero-art.art-photo {min-height:390px;max-width:100%;}
  .hero .art-caption {max-width:min(94%,290px);}
  .hero .scroll-hint {display:none;}
  main .section {padding-block:65px;}
  .section h2 {font-size:clamp(27px,6.9vw,37px);line-height:1.62;}
  .section .section-head {margin-bottom:24px;}
  .section p {font-size:13px;line-height:2.1;}
  .section .card-grid {grid-template-columns:1fr;}
  .section .card-grid .card:last-child:nth-child(odd) {grid-column:auto;}
  .section .card {padding:22px;}
  .section .diagram {min-height:280px;}
  .section .diagram-grid {gap:10px;}
  .section .diagram-tile {min-height:106px;padding:14px 12px;}
  .section .diagram-tile b {font-size:12px;}
  .section .diagram-tile small {font-size:9px;}
  .section .brand-names span {padding:10px 13px;font-size:11px;}
  .section .proof-band {padding:24px 20px;}
  .section .proof-band .btn-ghost {margin-top:12px;}
  .section.cta-section .container {padding:25px 16px;border-radius:20px;}
}
@media (max-width:370px) {
  .hero .hero-actions {grid-template-columns:1fr;}
  .hero h1 {font-size:33px;}
  .hero-art.art-photo {min-height:340px;}
  .brand {font-size:16px;}
  .header-cta {padding:8px 9px;}
}
/* Restore hover motion only on the homepage cards; the legacy JS rule freezes
   data-reveal elements globally. Keep all content immediately readable. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .js .section .card[data-reveal] {
    transition:transform .5s cubic-bezier(.2,.85,.15,1),box-shadow .5s ease,border-color .5s ease!important;
  }
  .js .section .card[data-reveal]:hover {
    transform:translateY(-7px)!important;
  }
}
/* Motion and performance accommodations. */
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important;}
  .hero::before,.hero-art.art-photo::after,.section .proof-band::before,
  .hero .hero-copy h1,.hero .hero-copy .hero-summary,
  .hero .hero-actions,.hero-art .art-caption,
  .section .brand-names span,.section .card .icon,.section .diagram-tile small {
    animation:none!important;translate:none!important;filter:none;
  }
  .section .card,.section .diagram-tile,.section .brand-names span,.btn {
    transition:none!important;
  }
}
/* Browser fallback for unsupported or costly backdrop filtering. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .site-header,.section .card,.section .card.dark-card,
  .section .diagram-tile,.section .faq-list details {background:#f8fbff;}
}

/* segment */
/*
 * Glass V1 — Visible Ambient Add-on V2
 *
 * Purpose: genuine, visible loops without moving the mouse.
 * This file is additive and home-only; original Glass V1 animations,
 * hover behavior, text, layout and scripts must not be edited.
 * Decorative shapes use their own pseudo-elements (not V1's motion elements).
 * Motion never hides content. A reduced-motion opt-out is mandatory.
 */

@keyframes nav-addon-orbit-arc {
  0% { transform:rotate(0deg); opacity:.72; }
  50% { opacity:1; }
  100% { transform:rotate(360deg); opacity:.72; }
}
@keyframes nav-addon-glide {
  0%,100% {transform:translate3d(-46px,24px,0) scale(.92);opacity:.74;}
  50% {transform:translate3d(46px,-30px,0) scale(1.1);opacity:1;}
}
@keyframes nav-addon-soft-drift {
  0%,100% {transform:translate3d(-30px,22px,0);opacity:.6;}
  50% {transform:translate3d(55px,-18px,0);opacity:.96;}
}
@keyframes nav-addon-orbit-small {
  0%,100% {transform:translate3d(-16px,5px,0) rotate(-12deg);opacity:.57;}
  50% {transform:translate3d(22px,-19px,0) rotate(13deg);opacity:.96;}
}
@keyframes nav-addon-shine {
  0%,10% {transform:translate3d(210%,0,0) skewX(-15deg);opacity:.05;}
  35% {opacity:.86;}
  56% {transform:translate3d(-235%,0,0) skewX(-15deg);opacity:.86;}
  65%,100% {transform:translate3d(-235%,0,0) skewX(-15deg);opacity:.05;}
}
@keyframes nav-addon-icon-star {
  0%,100% {transform:translate3d(-8px,5px,0) scale(.7);opacity:.43;}
  50% {transform:translate3d(15px,-13px,0) scale(1.25);opacity:1;}
}
@keyframes nav-addon-pulse {
  0%,100% {opacity:.55;transform:scale(.85);}
  50% {opacity:1;transform:scale(1.14);}
}
@keyframes nav-addon-line-wave {
  0%,100% {transform:scaleX(.72);opacity:.44;}
  50% {transform:scaleX(1);opacity:1;}
}

@media (prefers-reduced-motion: no-preference) {
  /*
   * HERO — distinct loop visible in the first 3 seconds.
   * Draw a partially luminous orbit BEHIND the unmodified photo and heading.
   * The original orbit-lines, photo and hover glow remain fully unchanged.
   */
  #main .hero-grid::before {
    content:"";position:absolute;pointer-events:none;z-index:0;
    width:clamp(370px,42vw,630px);aspect-ratio:1;
    top:1%;left:-5%;border-radius:50%;
    background:conic-gradient(
      from 16deg,
      transparent 0deg,
      rgba(21,117,244,.23) 48deg,
      rgba(47,166,252,.85) 76deg,
      rgba(8,97,218,.41) 108deg,
      transparent 143deg,
      transparent 196deg,
      rgba(69,187,255,.72) 228deg,
      rgba(32,104,237,.26) 260deg,
      transparent 295deg
    );
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 12px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 12px));
    filter:drop-shadow(0 0 14px rgba(36,138,248,.36));
    animation:nav-addon-orbit-arc 13s linear infinite;
  }
  #main .hero-grid::after {
    content:"";position:absolute;pointer-events:none;z-index:0;
    width:clamp(280px,30vw,465px);aspect-ratio:1;
    left:-9%;bottom:-7%;border-radius:50%;
    background:radial-gradient(circle,rgba(38,145,250,.38) 0%,
      rgba(70,176,250,.24) 34%,rgba(121,211,251,.12) 54%,transparent 75%);
    animation:nav-addon-glide 9s ease-in-out infinite;
  }
  #main .hero-copy::before {
    content:"";position:absolute;pointer-events:none;z-index:-1;
    width:clamp(220px,28vw,390px);aspect-ratio:1;
    inset-inline-end:-19%;top:-19%;border-radius:50%;
    background:radial-gradient(circle,rgba(53,145,240,.39),rgba(138,213,253,.24) 44%,transparent 74%);
    animation:nav-addon-glide 8s ease-in-out infinite;
    animation-delay:-3s;
  }
  /* Visible animated accent beneath the hero copy, away from the text. */
  #main .hero-copy::after {
    content:"";position:absolute;pointer-events:none;
    width:min(290px,55%);height:3px;bottom:-24px;
    inset-inline-start:0;border-radius:10px;
    background:linear-gradient(90deg,transparent,#1369d9,#5ed8ff,transparent);
    box-shadow:0 0 13px rgba(36,149,249,.36);
    transform-origin:65% 50%;
    animation:nav-addon-line-wave 5s ease-in-out infinite;
  }

  /*
   * SECTION LIGHTS — stronger blue-to-cyan shades and larger travel arcs.
   * Each section still has the same background and content structure as V1.
   */
  #trust::before,#start::before,#approach::before,
  #learning-entry::before,#articles-entry::before,#home-faq::before {
    content:"";position:absolute;pointer-events:none;z-index:0;
    width:clamp(340px,42vw,580px);aspect-ratio:1;
    inset-inline-start:-95px;top:-60px;border-radius:50%;
    background:radial-gradient(circle,
      rgba(48,141,240,.42) 0%,
      rgba(105,191,252,.3) 37%,
      rgba(121,195,246,.13) 63%,transparent 78%);
    animation:nav-addon-soft-drift 9s ease-in-out infinite;
  }
  #start::before,#learning-entry::before,#home-faq::before {
    inset-inline-start:auto;inset-inline-end:-100px;
    animation-delay:-4s;
  }
  #approach::before {animation-delay:-6s;}
  #articles-entry::before {animation-delay:-3s;}
  #home-faq::before {animation-delay:-7s;}

  /* Second moving prism/edge in the section whitespace, never over text. */
  #trust::after,#start::after,#approach::after,
  #learning-entry::after,#articles-entry::after,#home-faq::after {
    content:"";position:absolute;z-index:0;pointer-events:none;
    width:clamp(160px,20vw,285px);aspect-ratio:1;
    inset-inline-end:5%;bottom:-55px;border-radius:50%;
    border:2px solid rgba(28,126,243,.27);
    background:radial-gradient(circle at 22% 25%,rgba(255,255,255,.9),
      rgba(144,205,255,.27) 45%,rgba(21,128,241,.12) 63%,transparent 74%);
    box-shadow:inset 0 0 24px rgba(53,138,248,.08),0 15px 55px rgba(66,138,241,.08);
    animation:nav-addon-orbit-small 10s ease-in-out infinite;
  }
  #start::after,#articles-entry::after {inset-inline-end:auto;inset-inline-start:3%;animation-delay:-5s;}
  #approach::after,#home-faq::after {animation-delay:-7s;}

  /* Blue illuminated orbit in the existing light glass service panel. */
  main .section-ink::after {
    content:"";position:absolute;z-index:0;pointer-events:none;
    width:clamp(300px,39vw,540px);aspect-ratio:1;
    inset-inline-end:-4%;top:-50px;border-radius:50%;
    background:radial-gradient(circle,rgba(40,140,242,.4),rgba(70,166,248,.2) 42%,transparent 72%);
    box-shadow:0 0 68px rgba(68,152,249,.09);
    animation:nav-addon-glide 9s ease-in-out infinite;
    animation-delay:-4s;
  }

  /* SHINE — blue glass refraction, not white-on-white.
     Sweeps every 7 seconds and is instantly in motion. */
  #trust .brand-names span {position:relative;overflow:hidden;isolation:isolate;}
  #trust .brand-names span::after {
    content:"";position:absolute;z-index:1;pointer-events:none;
    top:-40%;left:0;width:40%;height:180%;
    background:linear-gradient(90deg,transparent,rgba(57,143,244,.15) 35%,
      rgba(69,181,255,.45) 50%,rgba(255,255,255,.67) 62%,transparent);
    animation:nav-addon-shine 7s linear infinite;
  }
  #trust .brand-names span:nth-child(2)::after {animation-delay:-2s;}
  #trust .brand-names span:nth-child(3)::after {animation-delay:-4s;}
  #trust .brand-names span:nth-child(4)::after {animation-delay:-5s;}
  #trust .brand-names span:nth-child(5)::after {animation-delay:-6s;}

  /*
   * CARD ICONS — floating pinpoints INSIDE existing icon rectangles;
   * the cards, their existing hover styles and the icon transforms are untouched.
   */
  #start .card .icon,.section-ink .card .icon {
    position:relative;isolation:isolate;overflow:hidden;
  }
  #start .card .icon::before,.section-ink .card .icon::before {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:18px;height:18px;top:0;left:1px;border-radius:50%;
    background:radial-gradient(circle,#3ca8fa 0%,rgba(39,148,247,.48) 45%,transparent 74%);
    box-shadow:0 0 10px rgba(29,133,242,.28);
    animation:nav-addon-icon-star 5.2s ease-in-out infinite;
  }
  #start .card .icon::after,.section-ink .card .icon::after {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:13px;height:13px;bottom:2px;right:3px;border-radius:50%;
    background:radial-gradient(circle,#60c6ff 0%,rgba(55,155,248,.37) 55%,transparent 76%);
    animation:nav-addon-icon-star 6.3s ease-in-out infinite reverse;
  }
  #start .card:nth-child(2) .icon::after,.section-ink .card:nth-child(2) .icon::after {animation-delay:-2s;}
  #start .card:nth-child(3) .icon::after,.section-ink .card:nth-child(3) .icon::after {animation-delay:-4s;}

  /* Stronger independent breathing blue light behind process tiles. */
  #approach .diagram::after,#meta-entry .diagram::after,
  #learning-entry .diagram::after,#courses-entry .diagram::after {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:min(86%,410px);aspect-ratio:1;left:7%;top:5%;border-radius:50%;
    background:radial-gradient(circle,rgba(48,137,248,.47),rgba(106,201,250,.24) 48%,transparent 75%);
    animation:nav-addon-pulse 7s ease-in-out infinite;
  }
  #meta-entry .diagram::after {animation-delay:-2s;}
  #learning-entry .diagram::after {animation-delay:-4s;}
  #courses-entry .diagram::after {animation-delay:-5s;}

  /* Visible moving turquoise beam on the established Al-Barq case study band. */
  .section .proof-band::after {
    content:"";position:absolute;z-index:0;pointer-events:none;
    width:31%;height:190%;top:-46%;left:4%;border-radius:50%;
    background:radial-gradient(ellipse,rgba(220,249,255,.69),rgba(124,221,255,.26) 35%,transparent 70%);
    filter:blur(12px);
    animation:nav-addon-soft-drift 7.5s ease-in-out infinite;
  }

  /* Calm but visible refraction behind the concluding CTA. */
  .cta-section .container::before {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:min(65%,700px);height:140%;left:-12%;top:-25%;border-radius:50%;
    background:radial-gradient(ellipse,rgba(183,231,255,.43),rgba(113,190,251,.18) 48%,transparent 72%);
    animation:nav-addon-glide 10s ease-in-out infinite;
  }
}

/* Mobile: keep a distinctive moving hero, light fields and card glints while
   removing secondary prisms that consume space and battery. */
@media (max-width:600px) and (prefers-reduced-motion:no-preference) {
  #main .hero-grid::before {width:min(85vw,350px);left:-7%;top:32%;opacity:.65;}
  #main .hero-grid::after {width:250px;left:-25%;bottom:12%;opacity:.78;}
  #main .hero-copy::before {width:230px;top:-20%;inset-inline-end:-5%;}
  #main .hero-copy::after {bottom:-16px;}
  #trust::before,#start::before,#approach::before,
  #learning-entry::before,#articles-entry::before,#home-faq::before {
    width:310px;inset-inline-start:-135px;top:-20px;
  }
  #start::before,#learning-entry::before,#home-faq::before {
    inset-inline-end:-140px;inset-inline-start:auto;
  }
  #trust::after,#start::after,#approach::after,
  #learning-entry::after,#articles-entry::after,#home-faq::after {
    width:155px;height:155px;bottom:-42px;opacity:.55;
  }
  #trust .brand-names span::after {animation-duration:9s;}
  .section .proof-band::after {filter:blur(16px);}
}

/* Respect user preference and turn off ONLY this add-on. The original Glass
   V1 reduced-motion handling remains exactly as it was. */
@media (prefers-reduced-motion:reduce) {
  #main .hero-grid::before,#main .hero-grid::after,
  #main .hero-copy::before,#main .hero-copy::after,
  #trust::before,#start::before,#approach::before,
  #learning-entry::before,#articles-entry::before,#home-faq::before,
  #trust::after,#start::after,#approach::after,
  #learning-entry::after,#articles-entry::after,#home-faq::after,
  main .section-ink::after,
  #trust .brand-names span::after,
  #start .card .icon::before,#start .card .icon::after,
  .section-ink .card .icon::before,.section-ink .card .icon::after,
  #approach .diagram::after,#meta-entry .diagram::after,
  #learning-entry .diagram::after,#courses-entry .diagram::after,
  .section .proof-band::after,.cta-section .container::before {
    content:none!important;
    animation:none!important;
  }
}

/* segment */
/*
 * Glass V1 — Home Spacing Rhythm V1
 * Scope: homepage only. Spacing-only corrections based on measured layouts
 * at 1440, 768, 390, and 320px.
 *
 * Intent:
 * - Keep the original Glass V1 colors, animation, visual treatments & markup.
 * - Use consistent section breathing room, content hierarchy and card rhythm.
 * - Correct over-wide section gutters without crowding Arabic copy.
 * - Never modify animations, hover styles, opacity, transforms, fonts or imagery.
 */

/* Desktop vertical rhythm — original was ~101px ON EACH SIDE at 1440px. */
main .section {
  padding-block:clamp(70px,5.45vw,86px);
}
/* Keep section introductions visually connected to their contents. */
main .section .section-head {
  margin-bottom:28px;
  gap:20px;
}
main .section h2 {
  margin-block:8px 14px;
}
main .section .split {
  gap:clamp(30px,4.3vw,60px);
}
/* Groups follow a consistent 8/16/24/32px rhythm with enough touch space. */
main .section .card-grid {
  gap:clamp(16px,1.7vw,24px);
}
main .section .card {
  padding:clamp(24px,2.3vw,33px);
}
main .section .card h3 {
  margin-bottom:12px;
}
main .section .brand-names {
  margin-block:22px 16px;
  gap:12px;
}
main .section .proof-band {
  padding:clamp(26px,2.8vw,38px);
}
main .section .faq-list {
  gap:12px;
}

/* Hero stays deliberately more spacious than regular reading sections. */
main .hero {
  padding-top:clamp(152px,12.2vw,176px);
  padding-bottom:clamp(77px,7vw,101px);
}
main .hero h1 {
  margin-block:18px;
}
main .hero .hero-actions {
  margin-top:24px;
}
main .hero .hero-tags {
  margin-top:21px;
}

/* Tablet: the columns stack, so visual-to-copy gaps need a steady rhythm. */
@media (max-width:850px) {
  main .hero {
    padding-top:138px;
    padding-bottom:64px;
  }
  main .hero-grid {gap:26px;}
  main .section {padding-block:60px;}
  main .section .section-head {margin-bottom:26px;}
  main .section .split {gap:30px;}
}

/* Phone: avoid the old 65+65px section gutters and inconsistent empty space.
   Preserve card padding and four-point contact areas for tap accessibility. */
@media (max-width:600px) {
  main .hero {
    padding-top:120px;
    padding-bottom:50px;
  }
  main .hero-grid {gap:22px;}
  main .hero h1 {margin-block:15px;}
  main .hero .hero-actions {margin-top:21px;}
  main .hero .hero-tags {margin-top:18px;}
  main .section {padding-block:48px;}
  main .section .section-head {
    margin-bottom:22px;
    gap:16px;
  }
  main .section h2 {margin-block:8px 13px;}
  main .section .split {gap:28px;}
  main .section .card-grid {gap:16px;}
  main .section .card {padding:22px;}
  main .section .brand-names {margin-block:20px 16px;gap:10px;}
  main .section .proof-band {padding:24px 20px;}
  main .section .faq-list {gap:10px;}
  main .section .faq-list details {padding-block:16px;}
}

/* Smallest supported phones: text can wrap an extra line.
   Hold adequate padding without exaggerating every section boundary. */
@media (max-width:370px) {
  main .hero {padding-top:116px;padding-bottom:46px;}
  main .hero-grid {gap:20px;}
  main .section {padding-block:45px;}
  main .section .card-grid {gap:15px;}
}