.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@font-face{font-family:"Glyph Portal Jakarta";src:url("https://cdn.21st.dev/assets/mirror/15/153fc85b70298beeb1d61a5f723331649e7f23bb77302a66e61cb3e2fbdb5e79.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap;}
@font-face{font-family:"Open Sauce One";src:url("https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@5.3.0/latin-400-normal.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Open Sauce One";src:url("https://cdn.jsdelivr.net/fontsource/fonts/open-sauce-one@5.3.0/latin-600-normal.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap;}

:root{--paper:#f1f2ed;--ink:#07110d;--dark:#08130f;--dark2:#0b1d15;--blue:#067ef8;--cyan:#5cdafe;--cyan2:#6df3fc;--muted:#59645e;--line:rgba(7,17,13,.13);--white:#f2f4ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;text-rendering:optimizeLegibility}a{color:inherit}::selection{background:#5cdafe;color:#07110d}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,56px);pointer-events:none;opacity:1;transform:translateY(0)}.site-header>*{pointer-events:auto;transition:opacity .34s ease,transform .34s ease}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.brand-symbol{display:block;width:42px;height:42px;object-fit:contain;transform:translateY(-1px)}.brand-wordmark-stack{position:relative;display:block;width:96px;height:20px;overflow:visible}.brand-wordmark-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .24s ease}.brand-wordmark-light{opacity:1}.brand-wordmark-dark{opacity:0}.brand-registered{position:absolute;right:-10px;top:-7px;color:#067ef8;font-family:Arial,sans-serif;font-size:9px;font-weight:700;line-height:1}.site-header.on-dark .brand-registered{color:#6df3fc}.site-header.on-dark .brand-wordmark-light{opacity:0}.site-header.on-dark .brand-wordmark-dark{opacity:1}.header-cta{font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:13px;font-weight:600;text-decoration:none;color:#1a243d;background:rgba(255,255,255,.74);border:1px solid rgba(26,36,61,.12);backdrop-filter:blur(10px);border-radius:999px;padding:10px 14px;box-shadow:0 8px 28px rgba(6,126,248,.06);transition:.2s}.header-cta:hover{background:#067ef8;border-color:#5cdafe;color:#fff}.site-header.on-dark .header-cta{color:#fff;background:rgba(26,36,61,.36);border-color:rgba(109,243,252,.22)}
.hero-wrap{height:210vh;position:relative}.hero-pin{height:100vh;position:sticky;top:0;overflow:hidden;background:var(--paper);isolation:isolate}.hero-copy{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.hero-kicker{position:absolute;top:22%;font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:rgba(26,36,61,.56)}.hero-word{margin:0;color:#1a243d;font-size:clamp(78px,16vw,240px);font-weight:780;line-height:.84;letter-spacing:.12em;white-space:nowrap;text-indent:.12em}.hero-tagline{position:absolute;left:50%;top:64.5%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:clamp(15px,1.35vw,18px);font-weight:400;line-height:1.4;color:rgba(26,36,61,.72);text-align:center;white-space:nowrap}.hero-button{pointer-events:auto;position:absolute;top:74.5%;display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:10px;background:#5cdafe;color:#1a243d;border:1px solid #6df3fc;text-decoration:none;font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.005em;line-height:1;transition:.2s}.hero-button:hover{background:#6df3fc;border-color:#6df3fc}.hero-scroll{position:absolute;bottom:6%;font-size:11px;color:#7c817b}
.hero-dark{position:absolute;inset:0;z-index:1;background:#1a243d;opacity:0;will-change:opacity}.hero-zoom-word{position:absolute;z-index:2;margin:0;color:#1a243d;font-weight:780;line-height:.84;letter-spacing:.12em;text-indent:.12em;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%;opacity:0}.field-grid{position:absolute;inset:-15%;opacity:.13;background-image:linear-gradient(rgba(109,243,252,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(109,243,252,.10) 1px,transparent 1px);background-size:72px 72px;transform:perspective(500px) rotateX(58deg) translateY(26%);transform-origin:center bottom;mask-image:linear-gradient(to top,#000,transparent 75%)}.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28}.glow.a{width:46vw;height:46vw;background:#067ef8;left:-12vw;top:-12vw;opacity:.30}.glow.b{width:38vw;height:38vw;background:#5cdafe;right:-14vw;bottom:-14vw;opacity:.20}.node{position:absolute;width:5px;height:5px;border-radius:50%;background:#6df3fc;box-shadow:0 0 24px rgba(109,243,252,.72);opacity:.62}.n1{left:20%;top:28%}.n2{left:68%;top:22%}.n3{left:78%;top:63%}.n4{left:42%;top:72%}.n5{left:57%;top:46%}
.portal-reveal{position:absolute;z-index:3;left:clamp(28px,7vw,100px);bottom:8%;max-width:1040px;color:var(--white);opacity:0;transform:translateY(20px);will-change:opacity,transform}.portal-reveal .kicker,.section-label{display:block;margin-bottom:20px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6df3fc}.portal-reveal h2{max-width:19ch;margin:0;font-size:clamp(38px,4.6vw,66px);line-height:1.03;letter-spacing:-.045em;font-weight:600;text-wrap:balance}.portal-reveal p{max-width:840px;margin:24px 0 0;color:rgba(244,248,255,.82);font-family:"Open Sauce One","Open Sauce Sans",Arial,sans-serif;font-size:clamp(16px,1.30vw,18px);font-weight:400;line-height:1.68;letter-spacing:.002em}.portal-reveal p.portal-emphasis{margin-top:26px;color:#6df3fc;font-weight:600;letter-spacing:0}.portal-reveal p strong{color:inherit;font-weight:600}.portal-reveal a{display:inline-flex;gap:14px;margin-top:28px;text-decoration:none;font-size:13px;font-weight:650}
.section{padding:clamp(76px,10vw,144px) 0}.container{width:min(1380px,calc(100% - 40px));margin:0 auto}.light{background:var(--paper);color:var(--ink)}.dark{background:linear-gradient(135deg,#101b34 0%,#16233f 68%,#17374a 100%);color:var(--white)}
.intro{border-bottom:1px solid var(--line)}.intro-pre{padding:0 0 56px}.intro-pre h2{max-width:24ch;margin:0 0 28px;font-family:Inter,Arial,sans-serif;font-size:clamp(36px,4.4vw,66px);line-height:1.02;letter-spacing:-.045em;font-weight:600;color:#24b8f2}.intro-pre h2 span{display:block}.intro-pre p{max-width:92ch;margin:0 0 18px;font-family:"Open Sauce One","Open Sauce Sans",Arial,sans-serif;font-size:clamp(18px,1.5vw,22px);font-weight:400;line-height:1.62;color:#111820}.intro-pre p:last-child{margin-bottom:0}.intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}.intro-item{min-height:330px;padding:32px clamp(20px,3vw,44px) 28px 0;border-right:1px solid var(--line)}.intro-item+.intro-item{padding-left:clamp(20px,3vw,44px)}.intro-item:last-child{border-right:0;padding-right:0}.intro-no{font:600 11px/1 ui-monospace,monospace;letter-spacing:.08em;color:#067ef8}.intro-item h2{max-width:20ch;margin:76px 0 20px;font-family:Inter,Arial,sans-serif;font-size:clamp(20px,1.8vw,28px);line-height:1.14;letter-spacing:-.028em;font-weight:600;color:#1a243d}.intro-item h2 .title-highlight{background:none;padding:0}.intro-item p{max-width:43ch;margin:0 0 14px;font-family:"Open Sauce One","Open Sauce Sans",Arial,sans-serif;color:#111820;font-size:15px;font-weight:400;line-height:1.68}.intro-item p:last-child{margin-bottom:0}.intro-item strong{color:#111820;font-weight:600}.intro-cta-row{display:flex;justify-content:flex-end;padding-top:30px}.intro-function-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid rgba(6,126,248,.72);border-radius:999px;background:rgba(6,126,248,.06);color:#067ef8;text-decoration:none;font-size:13px;font-weight:600;transition:.2s}.intro-function-link:hover{background:rgba(6,126,248,.12);border-color:#067ef8}
.explorer{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.65fr);gap:clamp(48px,7vw,112px);align-items:start}.explorer-intro{position:sticky;top:112px}.explorer-intro h2{max-width:12ch;margin:0;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.05em;font-weight:560}.explorer-intro p{max-width:38ch;margin:28px 0 0;color:rgba(242,244,239,.62);line-height:1.6;font-size:15px}.tabs{display:flex;gap:7px;padding:20px 0;overflow-x:auto;border-top:1px solid rgba(242,244,239,.16);border-bottom:1px solid rgba(242,244,239,.12);scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.explore-cue{margin:10px 0 0;color:rgba(109,243,252,.62);font-size:11px;line-height:1.4;letter-spacing:.025em}.explore-cue::before{content:"↗";margin-right:7px;color:#5cdafe}.tabs button{white-space:nowrap;border:1px solid #5cdafe;color:#10213a;background:#5cdafe;border-radius:999px;padding:10px 14px;cursor:pointer;font-size:12px;font-weight:650;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}.tabs button:hover,.tabs button.active{color:#0b1b31;border-color:#6df3fc;background:#6df3fc;box-shadow:0 0 0 1px rgba(109,243,252,.14) inset,0 8px 24px rgba(92,218,254,.12);transform:translateY(-1px)}.panel{min-height:520px;padding:clamp(48px,6vw,78px) 0 20px}.panel-eyebrow{display:block;color:#5cdafe;font-size:11px;letter-spacing:.14em;font-weight:700}.panel h3{max-width:18ch;margin:24px 0 36px;font-size:clamp(28px,3.5vw,48px);line-height:1.06;letter-spacing:-.035em;font-weight:520;text-wrap:balance}.panel-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}.panel-copy.single{grid-template-columns:minmax(0,1fr);max-width:980px;gap:16px}.panel-copy p{margin:0;color:rgba(242,244,239,.68);line-height:1.72;font-size:15px}.panel-copy strong{color:#f2f4ef;font-weight:600}.case-demo{margin-top:30px;padding:0;border-radius:22px}.case-demo-eyebrow{display:block;color:#5cdafe;font-size:11px;letter-spacing:.14em;font-weight:700;margin-bottom:10px}.case-demo-title{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.08;letter-spacing:-.025em;font-weight:560;color:#f2f4ef}.case-demo-subtitle{margin:10px 0 0;color:rgba(242,244,239,.72);font-size:15px;line-height:1.55}.case-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.case-card,.case-reading{background:rgba(13,32,58,.72);border:1px solid rgba(92,218,254,.10);border-radius:14px;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.case-card-label,.case-reading-label{display:block;color:#c6d4e8;font-size:11px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}.case-metric{margin-top:12px;font-size:40px;line-height:1;color:#6df3fc;font-weight:620;letter-spacing:-.04em}.case-metric-title{margin-top:10px;color:#f2f4ef;font-size:16px;font-weight:650}.case-card p{margin:10px 0 0;color:rgba(242,244,239,.70);font-size:14px;line-height:1.58}.case-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}.case-list li{display:flex;align-items:flex-start;gap:10px;color:#f2f4ef;font-size:14px;line-height:1.5}.case-list li::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:999px;background:#6df3fc;box-shadow:0 0 0 4px rgba(109,243,252,.10);margin-top:9px}.case-reading{margin-top:14px;background:linear-gradient(180deg,rgba(19,49,92,.92) 0%, rgba(20,62,110,.92) 100%)}.case-reading-label{display:flex;align-items:center;gap:10px;color:#f2f4ef}.case-reading-label::before{content:"✦";color:#6df3fc;font-size:13px;line-height:1}.case-reading p{margin:12px 0 0;color:#f2f4ef;font-size:15px;line-height:1.62}.case-foot{margin:12px 0 0;color:rgba(242,244,239,.56);font-size:12px;line-height:1.5}.panel-copy.single + .case-demo{max-width:980px}.reveal-case{opacity:0;transform:translateY(28px) scale(.985);filter:blur(3px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s ease}.reveal-case.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}.reveal-case .case-card,.reveal-case .case-reading{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}.reveal-case.is-visible .case-card,.reveal-case.is-visible .case-reading{opacity:1;transform:translateY(0)}.reveal-case.is-visible .case-card:nth-of-type(1){transition-delay:.10s}.reveal-case.is-visible .case-card:nth-of-type(2){transition-delay:.18s}.reveal-case.is-visible .case-reading{transition-delay:.28s}@media(prefers-reduced-motion:reduce){.reveal-case,.reveal-case .case-card,.reveal-case .case-reading{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
.eco-head{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:46px}.eco-head .section-label{grid-column:1/-1;color:#067ef8}.eco-head h2{max-width:13ch;margin:0;color:#1a243d;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.052em;font-weight:560}.eco-head p{max-width:42ch;margin:0 0 8px;color:#59645e;line-height:1.6;font-size:14px}.eco-system-link{position:absolute;top:-8px;right:0;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid rgba(6,126,248,.72);border-radius:999px;background:rgba(6,126,248,.07);color:#067ef8;text-decoration:none;font-family:"Open Sauce One",Inter,Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.002em;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}.eco-system-link:hover{background:rgba(6,126,248,.12);border-color:#067ef8;color:#005fcb;transform:translateY(-1px)}.resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.resource{position:relative;min-height:185px;padding:24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;transition:.25s}.resource:hover{background:#e8ece5}.resource .arrow{position:absolute;right:20px;top:18px;font-size:16px}.resource h3{margin:46px 0 12px;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.028em;font-weight:600;color:#1a243d}.resource p{max-width:28ch;margin:0;color:#59645e;font-size:13px;line-height:1.5}
.closing{padding:clamp(90px,12vw,170px) 20px;background:radial-gradient(circle at 78% 24%, rgba(109,243,252,.12) 0%, rgba(109,243,252,.05) 18%, rgba(109,243,252,0) 42%),linear-gradient(135deg,#101b34 0%,#16233f 70%,#183149 100%);color:var(--white);text-align:center}.closing-inner{max-width:980px;margin:auto}.closing h2{margin:0 auto;max-width:14ch;font-size:clamp(48px,7vw,96px);line-height:.97;letter-spacing:-.06em;font-weight:560;text-wrap:balance;background:linear-gradient(90deg,#067ef8 0%,#24b8f2 48%,#6df3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.closing p{max-width:690px;margin:34px auto 0;color:rgba(242,244,239,.78);font-size:clamp(16px,1.6vw,19px);line-height:1.65}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:38px}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:0 22px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:650}.primary{background:#f2f4ef;color:#13223b}.secondary{border:1px solid rgba(242,244,239,.24);color:#f2f4ef}.footer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:48px;padding:42px clamp(20px,4vw,56px) 38px;background:#0d1525;color:rgba(242,244,239,.58);font-size:12px;border-top:1px solid rgba(109,243,252,.08)}.footer-legal{max-width:980px}.footer-legal-title{margin:0 0 10px;color:rgba(242,244,239,.86);font-size:11px;line-height:1.5;font-weight:700;letter-spacing:.045em;text-transform:uppercase}.footer-legal-copy{margin:0;max-width:1040px;font-size:11px;line-height:1.65;color:rgba(242,244,239,.48)}.footer-contact{align-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px;font-size:11px;color:rgba(242,244,239,.46)}.footer-contact a{color:inherit;text-decoration:none;transition:color .2s ease}.footer-contact a:hover{color:#6df3fc}.footer-contact span{white-space:nowrap}.footer-contact .dot::before{content:"·";margin-right:16px;color:rgba(109,243,252,.28)}
@media(max-width:900px){.intro-cta-row{justify-content:flex-start;padding-top:24px}.intro-grid{grid-template-columns:1fr}.intro-item,.intro-item+.intro-item,.intro-item:last-child{min-height:0;padding:28px 0 38px;border-right:0;border-bottom:1px solid var(--line)}.intro-item:last-child{border-bottom:0}.intro-item h2{margin-top:38px}.explorer{grid-template-columns:1fr}.explorer-intro{position:static}.panel{min-height:0}.eco-head{grid-template-columns:1fr;gap:24px;padding-top:58px}.eco-system-link{top:0;right:auto;left:0}.resources{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.resources{grid-template-columns:1fr}}
@media(max-width:640px){.site-header{padding:14px 16px}.brand-symbol{width:38px;height:38px}.brand-wordmark-stack{width:88px;height:18px}.brand-registered{right:-9px;top:-7px;font-size:8px}.container{width:min(100% - 28px,1380px)}.hero-kicker{top:25%;font-size:9px}.hero-tagline{top:62.5%;font-size:13px}.hero-button{top:72%}.hero-word,.hero-zoom-word{font-size:22vw;letter-spacing:.10em;text-indent:.10em}.panel-copy{grid-template-columns:1fr;gap:22px}.resource{min-height:240px;padding:24px}.resource h3{margin-top:64px}.footer{grid-template-columns:1fr;gap:24px}.footer-contact{justify-content:flex-start}.footer-contact .dot::before{margin-right:10px}.portal-reveal{bottom:8%;left:20px;right:20px}.portal-reveal h2{font-size:clamp(36px,10vw,54px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-wrap{height:100vh}.hero-dark{opacity:1}.hero-zoom-word{display:none}.hero-copy{opacity:0}.portal-reveal{opacity:1;transform:none}}

/* Exact GlyphPortal-style hero */
.glyph-hero{--gp-paper:#f4f6f4;--gp-ink:#1a243d;--gp-field:#1a243d;--gp-foreground:#f4f8ff;--gp-length:1;position:relative;isolation:isolate;background:var(--gp-paper);color:var(--gp-ink);font-family:Arial,Helvetica,sans-serif}
.glyph-hero>[data-gp-viewport]{position:absolute;inset:0 auto auto 0;height:100vh;height:100svh;width:0;pointer-events:none;visibility:hidden}
.glyph-pin{position:sticky;top:0;height:var(--gp-height,100svh);overflow:clip;isolation:isolate;container-type:size}
.glyph-field{position:absolute;inset:0;background:var(--gp-field);opacity:0;pointer-events:none;overflow:hidden}
.glyph-hero[data-ready="true"] .glyph-field{opacity:1}
.glyph-field-scene{position:absolute;inset:0;transform:scale(var(--gp-field-scale,1));background:#1a243d}
.glyph-field-decor{position:absolute;inset:0;opacity:var(--gp-decor,0)}
.glyph-field-decor .field-grid{position:absolute;inset:-15%;opacity:.13;background-image:linear-gradient(rgba(109,243,252,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(109,243,252,.10) 1px,transparent 1px);background-size:72px 72px;transform:perspective(500px) rotateX(58deg) translateY(26%);transform-origin:center bottom;mask-image:linear-gradient(to top,#000,transparent 75%)}
.glyph-field-decor .glow{position:absolute;border-radius:50%;filter:blur(70px)}
.glyph-field-decor .glow.a{width:46vw;height:46vw;background:#067ef8;left:-12vw;top:-12vw;opacity:.28}
.glyph-field-decor .glow.b{width:38vw;height:38vw;background:#5cdafe;right:-14vw;bottom:-14vw;opacity:.18}
.glyph-field-decor .node{position:absolute;width:5px;height:5px;border-radius:50%;background:#6df3fc;box-shadow:0 0 24px rgba(109,243,252,.72);opacity:.58}
.glyph-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.glyph-front{position:absolute;inset:0;z-index:3;opacity:var(--gp-caption,1);pointer-events:none}
.glyph-kicker{position:absolute;left:50%;top:calc(var(--gp-word-top,35%) - 58px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(26,36,61,.56);font-weight:500}
.glyph-tagline{position:absolute;left:50%;top:calc(var(--gp-word-bottom,55%) + 32px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;color:rgba(26,36,61,.72);font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:clamp(15px,1.6vw,19px);font-weight:400;line-height:1.45;text-align:center;white-space:nowrap}
.glyph-caption{position:absolute;z-index:4;left:24px;right:24px;top:calc(var(--gp-word-bottom,50%) + 112px);display:flex;justify-content:center;opacity:var(--gp-caption,1);pointer-events:var(--gp-caption-hit,auto)}
.glyph-enter{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:1px solid #6df3fc;border-radius:10px;background:#5cdafe;color:#1a243d;text-decoration:none;font-family:"Glyph Portal Jakarta",Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.005em;line-height:1;box-shadow:0 8px 28px rgba(6,126,248,.08);transition:background .18s,border-color .18s,transform .18s}
.glyph-enter:hover{background:#6df3fc;border-color:#6df3fc;transform:translateY(-1px)}
.glyph-scroll{position:absolute;z-index:4;left:0;right:0;bottom:6%;text-align:center;font-size:11px;color:#7c817b;opacity:var(--gp-caption,1)}
.glyph-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#1a243d;font-size:min(15.5vw,38cqh);font-weight:760;letter-spacing:.075em;text-indent:.075em;line-height:1}
.glyph-hero[data-ready="true"] .glyph-fallback{visibility:hidden}
.glyph-content{box-sizing:border-box;position:relative;z-index:5;min-height:var(--gp-height,100svh);margin-top:var(--gp-travel,80vh);padding:clamp(56px,8vw,112px);display:grid;align-content:center;color:var(--gp-foreground);background:transparent;opacity:var(--gp-reveal,0);pointer-events:none;overflow-wrap:anywhere}
.glyph-hero[data-entered="true"] .glyph-content{pointer-events:auto}
.glyph-content .portal-reveal{position:static;opacity:1;transform:none;max-width:1040px;color:#f4f8ff}

@media(max-width:640px){.glyph-kicker{top:calc(var(--gp-word-top,35%) - 44px);font-size:9px}.glyph-tagline{top:calc(var(--gp-word-bottom,55%) + 20px);font-size:14px}.glyph-caption{top:calc(var(--gp-word-bottom,50%) + 92px)}.glyph-content{padding:56px 20px}.glyph-fallback{font-size:20vw;letter-spacing:.06em;text-indent:.06em}}
@media(prefers-reduced-motion:reduce){.glyph-pin{position:relative}.glyph-field{clip-path:none!important;opacity:1}.glyph-front,.glyph-caption,.glyph-scroll{display:none}.glyph-fallback{display:none}.glyph-content{margin-top:0;opacity:1;background:#1a243d;min-height:auto;padding-block:72px;pointer-events:auto}.glyph-field-decor{opacity:1!important}}


/* Mobile optimization v25 */
@media(max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px}
  .site-header{padding:10px 12px;gap:10px}
  .brand{gap:8px}
  .brand-symbol{width:34px;height:34px;transform:translateY(0)}
  .brand-wordmark-stack{width:80px;height:17px}.brand-registered{right:-8px;top:-6px;font-size:8px}
  .header-cta{min-height:36px;padding:0 12px;font-size:11px;white-space:nowrap}
  .container{width:calc(100% - 32px)}
  .section{padding:68px 0}

  .glyph-kicker{top:calc(var(--gp-word-top,35%) - 38px);max-width:86vw;font-size:8.5px;letter-spacing:.14em;text-align:center}
  .glyph-tagline{top:calc(var(--gp-word-bottom,55%) + 18px);max-width:90vw;font-size:12.5px;line-height:1.35;white-space:nowrap}
  .glyph-caption{top:calc(var(--gp-word-bottom,50%) + 78px);left:16px;right:16px}
  .glyph-enter{min-height:46px;padding:0 22px;font-size:16px;border-radius:9px}
  .glyph-scroll{bottom:4.5%;font-size:10px}
  .glyph-fallback{font-size:17vw;letter-spacing:.035em;text-indent:.035em}
  .glyph-content{min-height:100svh;padding:92px 18px 52px;align-content:start}
  .glyph-content .portal-reveal{max-width:none}
  .portal-reveal h2{max-width:none;font-size:clamp(31px,9.2vw,40px);line-height:1.02;letter-spacing:-.042em;text-wrap:balance}
  .portal-reveal p{max-width:none;margin-top:16px;font-size:15px;line-height:1.55}
  .portal-reveal p.portal-emphasis{margin-top:20px;font-size:15px;line-height:1.5}

  .intro-pre{padding-bottom:36px}
  .intro-pre h2{max-width:none;margin:0;font-size:26px;line-height:1.06;letter-spacing:-.035em}
  .intro-pre h2 span{display:block}
  .intro-grid{border-top:1px solid var(--line)}
  .intro-item,.intro-item+.intro-item,.intro-item:last-child{min-height:0;padding:24px 0 30px;border-right:0;border-bottom:1px solid var(--line)}
  .intro-item:last-child{border-bottom:0;padding-bottom:0}
  .intro-no{font-size:10px}
  .intro-item h2{max-width:22ch;margin:22px 0 14px;font-size:23px;line-height:1.12;letter-spacing:-.025em}
  .intro-item p{max-width:none;margin-bottom:12px;font-size:14.5px;line-height:1.62}

  .explorer{grid-template-columns:1fr;gap:34px}
  .explorer-intro{position:static}
  .explorer-intro .section-label{margin-bottom:14px}
  .explorer-intro h2{max-width:11ch;font-size:37px;line-height:1.01;letter-spacing:-.045em}
  .explorer-intro p{max-width:none;margin-top:20px;font-size:14px;line-height:1.58}
  .tabs{gap:6px;margin-right:-16px;padding:14px 16px 14px 0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tabs button{scroll-snap-align:start;padding:9px 12px;font-size:11px}
  .explore-cue{font-size:10px;margin-top:8px}
  .panel{min-height:0;padding:36px 0 0}
  .panel-eyebrow{font-size:9.5px;line-height:1.45}
  .panel h3{max-width:none;margin:16px 0 24px;font-size:30px;line-height:1.08;letter-spacing:-.032em}
  .panel-copy{grid-template-columns:1fr;gap:16px}
  .panel-copy p{font-size:14px;line-height:1.62}

  .eco-head{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-top:0;margin-bottom:28px}
  .eco-system-link{position:static;order:0;min-height:40px;margin:0 0 26px;padding:0 14px;font-size:12px}
  .eco-head .section-label{order:1;margin-bottom:14px}
  .eco-head h2{order:2;max-width:11ch;font-size:36px;line-height:1.02;letter-spacing:-.045em}
  .eco-head p{order:3;max-width:none;margin:16px 0 0;font-size:14px;line-height:1.55}
  .resources{grid-template-columns:1fr;border-left:0}
  .resource{min-height:150px;padding:20px 0;border-right:0}
  .resource .arrow{right:2px;top:18px}
  .resource h3{margin:28px 30px 10px 0;font-size:24px;line-height:1.08}
  .resource p{max-width:30ch;font-size:13px;line-height:1.5}

  .closing{padding:82px 18px 76px}
  .closing .section-label{margin-bottom:16px}
  .closing h2{max-width:none;font-size:42px;line-height:.98;letter-spacing:-.05em}
  .closing p{max-width:none;margin-top:24px;font-size:15px;line-height:1.58}
  .actions{flex-direction:column;gap:10px;margin-top:30px}
  .btn{width:100%;min-height:48px;padding:0 18px;font-size:12.5px}

  .footer{grid-template-columns:1fr;gap:24px;padding:30px 18px 28px}
  .footer-legal-title{margin-bottom:8px;font-size:9.5px;line-height:1.55;letter-spacing:.035em}
  .footer-legal-copy{font-size:10px;line-height:1.6}
  .footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:10.5px}
  .footer-contact .dot::before{content:none;margin:0}
}
@media(max-width:380px){
  .brand-wordmark-stack{width:72px}
  .header-cta{padding:0 10px;font-size:10.5px}
  .glyph-tagline{font-size:11.5px}
  .glyph-enter{font-size:15px}
  .intro-pre h2{font-size:24px}
  .explorer-intro h2,.eco-head h2{font-size:34px}
  .closing h2{font-size:38px}
}

.footer-origin-link{color:inherit;text-decoration:none}.footer-origin-link:hover{color:#067ef8}


/* Final mobile optimization + brand refinements */
.contact-icon{display:none}.contact-icon svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:640px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
  body{min-width:0;overflow-x:hidden}
  .site-header{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;align-items:center}
  .brand-symbol{width:36px;height:36px;object-fit:contain}
  .brand-wordmark-stack{width:82px;height:18px}
  .header-cta{min-height:36px;padding:0 12px;font-size:10.8px;box-shadow:none}

  .glyph-pin{height:100svh;min-height:560px}
  .glyph-kicker{max-width:84vw;font-size:8.5px;line-height:1.3}
  .glyph-tagline{top:calc(var(--gp-word-bottom,55%) + 18px);width:min(86vw,390px);max-width:86vw;font-size:12.5px;line-height:1.35;white-space:normal;text-wrap:balance}
  .glyph-caption{top:calc(var(--gp-word-bottom,50%) + 96px);left:18px;right:18px}
  .glyph-enter{width:min(250px,78vw);min-height:46px;padding:0 18px;font-size:15px}
  .glyph-scroll{bottom:3.5%;font-size:9.5px}
  .glyph-content{min-height:100svh;padding:88px 18px 48px}
  .portal-reveal h2{font-size:clamp(30px,8.8vw,39px);line-height:1.03}
  .portal-reveal p{font-size:14.5px;line-height:1.56}
  .portal-reveal p.portal-emphasis{font-size:14.5px}

  .section{padding:62px 0}
  .container{width:calc(100% - 32px)}
  .intro-pre{padding-bottom:30px}
  .intro-pre h2{font-size:clamp(28px,8vw,34px);line-height:1.04;color:#24b8f2}
  .intro-item,.intro-item+.intro-item,.intro-item:last-child{padding:22px 0 28px}
  .intro-item h2{margin:19px 0 12px;font-size:22px}
  .intro-item p{font-size:14.25px;line-height:1.6}
  .intro-cta-row{justify-content:stretch;padding-top:24px}
  .intro-function-link{width:100%;min-height:46px}

  .explorer{gap:30px}
  .explorer-intro h2{max-width:none;font-size:clamp(33px,9.5vw,40px);line-height:1.01}
  .explorer-intro p{margin-top:17px;font-size:14px;line-height:1.56}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:14px 0 8px;border-top:1px solid rgba(242,244,239,.15);border-bottom:0;overflow:visible;scroll-snap-type:none}
  .tabs button{width:100%;min-height:42px;padding:8px 10px;white-space:normal;text-align:center;font-size:10.8px;line-height:1.2;background:#5cdafe;border-color:#5cdafe;color:#10213a}
  .tabs button:hover,.tabs button.active{background:#6df3fc;border-color:#6df3fc;color:#0b1b31;transform:none;box-shadow:0 0 0 2px rgba(109,243,252,.12)}
  .explore-cue{margin:10px 0 0;font-size:10px;line-height:1.4}
  .panel{padding:30px 0 0}
  .panel h3{margin:14px 0 20px;font-size:29px;line-height:1.07}
  .panel-copy{gap:14px}
  .panel-copy p{font-size:13.8px;line-height:1.6}
  .case-demo{margin-top:24px}
  .case-demo-title{font-size:24px}
  .case-demo-subtitle{font-size:14px}
  .case-demo-grid{grid-template-columns:1fr;gap:12px;margin-top:18px}
  .case-card,.case-reading{padding:15px 16px;border-radius:12px}
  .case-list{gap:10px}
  .case-reading{margin-top:12px}
  .case-reading p{font-size:14px;line-height:1.58}

  .eco-head{margin-bottom:24px}
  .eco-system-link{width:100%;justify-content:center;margin-bottom:24px}
  .eco-head h2{max-width:none;font-size:34px}
  .resources{gap:0}
  .resource{min-height:138px;padding:18px 0}
  .resource h3{font-size:22px}

  .closing{padding:72px 18px 66px}
  .closing h2{font-size:clamp(38px,11.5vw,46px);line-height:.98;background:linear-gradient(90deg,#067ef8 0%,#24b8f2 48%,#6df3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .closing p{margin-top:22px;font-size:14.5px;line-height:1.56}
  .actions{margin-top:26px}
  .btn{min-height:48px;font-size:12.25px}

  .footer{gap:20px;padding:28px 18px calc(24px + env(safe-area-inset-bottom,0px))}
  .footer-legal-title{font-size:9.25px;line-height:1.5}
  .footer-legal-copy{font-size:9.75px;line-height:1.58}
  .footer-contact{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px;font-size:10.5px}
  .footer-contact .dot::before{content:none}
  .footer-contact-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(109,243,252,.24);border-radius:999px;background:rgba(109,243,252,.06);color:#6df3fc;text-decoration:none}
  .footer-contact-link:hover{background:rgba(109,243,252,.12);color:#6df3fc}
  .contact-icon{display:block}
  .contact-label{display:none}
  .footer-location{flex:0 0 100%;margin-top:2px;color:rgba(242,244,239,.48);white-space:normal}
}

@media(max-width:390px){
  .site-header{padding-left:10px;padding-right:10px}
  .brand-wordmark-stack{width:72px}
  .header-cta{padding:0 10px;font-size:10px}
  .glyph-tagline{width:88vw;max-width:88vw;font-size:11.8px}
  .glyph-caption{top:calc(var(--gp-word-bottom,50%) + 92px)}
  .intro-pre h2{font-size:27px}
  .explorer-intro h2,.eco-head h2{font-size:32px}
  .tabs{grid-template-columns:1fr 1fr;gap:7px}
  .tabs button{font-size:10.2px;padding:8px 8px}
  .closing h2{font-size:37px}
}


/* Final UX corrections v3 */
.intro-pre h2{background:linear-gradient(90deg,#067ef8 0%,#24b8f2 48%,#6df3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs button{border-color:#5cdafe;color:#5cdafe;background:transparent;box-shadow:none}
.tabs button:hover,.tabs button.active{color:#6df3fc;border-color:#6df3fc;background:rgba(109,243,252,.07);box-shadow:0 0 0 1px rgba(109,243,252,.08) inset;transform:translateY(-1px)}
.panel-copy.single + .case-demo{margin-top:46px;padding-top:34px;border-top:1px solid rgba(109,243,252,.18)}
.eco-head{position:relative}
.eco-system-link{position:static;top:auto;right:auto;left:auto}
.eco-cta-row{display:flex;justify-content:flex-end;padding-top:28px}
.header-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
@media(max-width:900px){.eco-head{padding-top:0}.eco-cta-row{justify-content:flex-start}}
@media(max-width:640px){
  .header-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
  .tabs button{background:transparent;border-color:#5cdafe;color:#5cdafe;box-shadow:none}
  .tabs button:hover,.tabs button.active{background:rgba(109,243,252,.07);border-color:#6df3fc;color:#6df3fc;box-shadow:0 0 0 1px rgba(109,243,252,.08) inset;transform:none}
  .panel-copy.single + .case-demo{margin-top:34px;padding-top:26px;border-top:1px solid rgba(109,243,252,.18)}
  .eco-cta-row{justify-content:stretch;padding-top:24px}
  .eco-system-link{width:100%;justify-content:center;margin:0}
}

@media(max-width:640px){.glyph-pin{min-height:0}}

/* Final visual corrections v4 */
.portal-commercial-intro h2{
  background:linear-gradient(90deg,#067ef8 0%,#24b8f2 48%,#6df3fc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.intro-pre h2{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#1a243d;
  -webkit-text-fill-color:#1a243d;
}
@media(min-width:901px){
  .intro-grid{border-top:0}
}

/* GTI360 production v5 — enforced visual corrections */
.portal-commercial-intro h2{
  background:linear-gradient(90deg,#067ef8 0%,#24b8f2 48%,#6df3fc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.intro-pre h2{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#1a243d;
  -webkit-text-fill-color:#1a243d;
}
.tabs button{
  border:1px solid #5cdafe;
  color:#5cdafe;
  background:transparent;
  box-shadow:none;
}
.tabs button:hover,.tabs button.active{
  color:#6df3fc;
  border-color:#6df3fc;
  background:rgba(109,243,252,.07);
  box-shadow:0 0 0 1px rgba(109,243,252,.08) inset;
}
.panel-copy.single + .case-demo{
  margin-top:54px;
  padding-top:30px;
  border-top:1px solid rgba(109,243,252,.22);
}
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
}
.eco-cta-row{
  display:flex;
  justify-content:flex-end;
  padding-top:28px;
}
.eco-system-link{
  position:static;
  inset:auto;
}
@media(min-width:901px){
  .intro-grid{border-top:0}
}
@media(max-width:640px){
  .header-cta{justify-content:center;text-align:center;white-space:nowrap}
  .tabs button{background:transparent;color:#5cdafe;border-color:#5cdafe}
  .tabs button:hover,.tabs button.active{background:rgba(109,243,252,.07);color:#6df3fc;border-color:#6df3fc}
  .panel-copy.single + .case-demo{margin-top:38px;padding-top:24px}
  .eco-cta-row{justify-content:stretch;padding-top:24px}
  .eco-system-link{width:100%;justify-content:center;margin:0}
}


/* GTI360 production v6 — header parity, hero cleanup, mobile scroll restoration */
/* Remove only the upper-left illumination behind the first dark-screen title. */
.glyph-field-decor .glow.a{display:none!important}
.glyph-field-decor .glow.b{display:block}

/* Mobile overlay is disabled by default; desktop keeps the established flow. */
.glyph-mobile-reveal{display:none}

@media(max-width:640px){
  /* Navigation remains available for the full mobile page because this design has no menu. */
  .site-header{opacity:1!important;transform:none!important}
  .site-header .brand,.site-header .header-cta{opacity:1!important;transform:none!important;pointer-events:auto!important}

  /* Keep the original content screen in the document flow so the first blue screen remains visible after the zoom. */
  .glyph-content{
    min-height:var(--gp-height,100svh);
    height:auto;
    margin-top:var(--gp-travel,80vh);
    padding:calc(84px + env(safe-area-inset-top,0px)) 18px 48px;
    background:#1a243d;
    opacity:var(--gp-reveal,0);
    pointer-events:none;
    overflow-wrap:anywhere;
  }
  .glyph-hero[data-entered="true"] .glyph-content{pointer-events:auto}
  .glyph-content>.portal-reveal{visibility:visible}

  /* First blue screen content is also rendered inside the sticky viewport so it appears before the pin releases. */
  .glyph-mobile-reveal{
    box-sizing:border-box;
    position:absolute;
    inset:0;
    z-index:5;
    display:grid;
    align-content:start;
    padding:calc(84px + env(safe-area-inset-top,0px)) 18px 48px;
    color:#f4f8ff;
    background:transparent;
    opacity:var(--gp-reveal,0);
    pointer-events:none;
  }
  .glyph-mobile-reveal .portal-reveal{position:static;opacity:1;transform:none;max-width:none;color:#f4f8ff}
  .glyph-mobile-reveal .portal-reveal h2{max-width:none;font-size:clamp(30px,8.8vw,39px);line-height:1.03;letter-spacing:-.042em;text-wrap:balance}
  .glyph-mobile-reveal .portal-reveal p{max-width:none;margin-top:16px;font-size:14.5px;line-height:1.56}
  .glyph-mobile-reveal .portal-reveal p.portal-emphasis{margin-top:20px;font-size:14.5px;line-height:1.5}
}


/* GTI360 production v7 — pinned Explore experience
   The section remains visually anchored while the selected detail scrolls.
   Tabs stay visible; when the section content ends, normal page flow continues. */
#explorar{
  position:relative;
  isolation:isolate;
}
#explorar .explorer{
  align-items:start;
}
#explorar .explorer-detail{
  min-width:0;
  position:relative;
}
#explorar .explorer-nav{
  position:sticky;
  top:14px;
  z-index:12;
  padding:0 0 18px;
  background:linear-gradient(180deg,rgba(20,32,58,.985) 0%,rgba(20,32,58,.965) 76%,rgba(20,32,58,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#explorar .explorer-nav .tabs{
  margin:0;
}
#explorar .explorer-nav .explore-cue{
  margin-bottom:0;
}
#explorar .panel{
  position:relative;
  z-index:1;
  padding-top:34px;
}
@media(min-width:901px){
  #explorar .explorer-intro{
    top:112px;
    align-self:start;
  }
  #explorar .explorer-detail{
    padding-bottom:18px;
  }
}
@media(max-width:900px){
  #explorar .explorer-nav{
    top:66px;
    margin-left:-2px;
    margin-right:-2px;
    padding-top:8px;
    padding-bottom:14px;
    background:linear-gradient(180deg,rgba(20,32,58,.995) 0%,rgba(20,32,58,.975) 82%,rgba(20,32,58,0) 100%);
  }
  #explorar .panel{
    padding-top:24px;
  }
}
@media(max-width:640px){
  #explorar .explorer-nav{
    top:58px;
    padding-top:6px;
    padding-bottom:12px;
  }
  #explorar .tabs{
    margin:0;
  }
  #explorar .panel{
    padding-top:20px;
  }
}


/* GTI360 production v8 — rebuilt hero transition
   Transition travel is independent from content height. The camera reaches the 3,
   fills the viewport with blue, then the real content scrolls over the same field.
   This avoids the duplicated mobile screen and makes the blue section end with its copy. */
.glyph-mobile-reveal{display:none!important}

@media(max-width:640px){
  .glyph-pin{height:var(--gp-height,100svh);min-height:0}
  .glyph-content{
    box-sizing:border-box;
    min-height:0!important;
    height:auto!important;
    margin-top:var(--gp-travel,72vh)!important;
    padding:calc(70px + env(safe-area-inset-top,0px)) 18px 42px!important;
    display:block!important;
    background:transparent!important;
    opacity:var(--gp-reveal,0)!important;
    overflow:visible;
  }
  .glyph-content>.portal-reveal{
    position:static;
    opacity:1;
    transform:none;
    max-width:none;
  }
  /* Keep the same blue-field effects as desktop behind the first content screen. */
  .glyph-field-decor .field-grid{display:block}
  .glyph-field-decor .glow.b{display:block!important}
  .glyph-field-decor .node{display:block}
}

/* GTI360 production v9 — subtle content transitions */
.content-reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(1.5px);
  transition:
    opacity .68s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
    transform .68s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
    filter .68s ease var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.content-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
/* A slightly quieter entrance for large headings so the typography remains stable. */
.intro-pre.content-reveal,
.explorer-intro.content-reveal,
.eco-head.content-reveal{
  transform:translateY(16px);
}
.intro-item.content-reveal{transform:translateY(18px)}
.resource.content-reveal{transform:translateY(16px)}
.closing .content-reveal{transform:translateY(18px)}
.footer .content-reveal{transform:translateY(10px)}
.content-reveal.is-visible{transform:translateY(0)}

/* Topic changes inside Explorá GTI360. */
.panel-transition{
  opacity:0;
  transform:translateY(14px);
  filter:blur(1px);
  transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1),filter .42s ease;
}
.panel-transition.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

@media(max-width:640px){
  .content-reveal{transform:translateY(16px);transition-duration:.58s}
  .intro-item.content-reveal,.resource.content-reveal,.closing .content-reveal{transform:translateY(14px)}
  .content-reveal.is-visible{transform:translateY(0)}
  .panel-transition{transform:translateY(10px);transition-duration:.36s}
  .panel-transition.is-visible{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .content-reveal,.panel-transition{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}


/* GTI360 production v10 — mobile hero continuity QA rebuild
   One continuous sequence: paper -> centered 3 zoom -> full blue -> copy on the same blue field -> next section. */
.glyph-hero{
  background:#1a243d;
}
.glyph-pin{
  background:var(--gp-paper);
}
.glyph-content{
  margin-top:calc(var(--gp-travel,58vh) - var(--gp-height,100svh))!important;
  min-height:var(--gp-height,100svh)!important;
  height:auto!important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#1a243d!important;
}
.glyph-content::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-2;
  pointer-events:none;
  opacity:.72;
  background-image:
    linear-gradient(rgba(109,243,252,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,243,252,.085) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(520px) rotateX(58deg) translateY(28%);
  transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 78%);
  mask-image:linear-gradient(to top,#000,transparent 78%);
}
.glyph-content::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(520px,62vw);
  aspect-ratio:1;
  right:min(-180px,-12vw);
  bottom:min(-190px,-14vw);
  border-radius:50%;
  background:rgba(92,218,254,.22);
  filter:blur(78px);
  pointer-events:none;
}
.glyph-content>.portal-reveal{position:relative;z-index:2}

@media(max-width:640px){
  .glyph-hero{background:#1a243d!important}
  .glyph-pin{height:var(--gp-height,100svh)!important;min-height:0!important;background:var(--gp-paper)!important}
  .glyph-content{
    margin-top:calc(var(--gp-travel,48vh) - var(--gp-height,100svh))!important;
    min-height:var(--gp-height,100svh)!important;
    padding:calc(76px + env(safe-area-inset-top,0px)) 18px 42px!important;
    display:grid!important;
    align-content:center!important;
    background:#1a243d!important;
    opacity:var(--gp-reveal,0)!important;
  }
  .glyph-content::before{
    inset:-22%;
    background-size:54px 54px;
    opacity:.64;
  }
  .glyph-content::after{
    width:78vw;
    right:-36vw;
    bottom:-18vw;
    filter:blur(58px);
    background:rgba(92,218,254,.24);
  }
  .glyph-content>.portal-reveal{
    position:static!important;
    opacity:1!important;
    transform:none!important;
    max-width:none!important;
  }
}


/* GTI360 production v11 — verified continuous hero architecture
   The first blue message now lives INSIDE the sticky hero viewport.
   The section height is exactly viewport + transition travel, so there is no spacer or second blue screen. */
.glyph-hero{
  height:calc(var(--gp-height,100svh) + var(--gp-travel,50vh));
  min-height:calc(var(--gp-height,100svh) + var(--gp-travel,50vh));
  background:#1a243d!important;
  overflow:clip;
}
.glyph-pin{
  height:var(--gp-height,100svh)!important;
  min-height:0!important;
  background:var(--gp-paper)!important;
}
.glyph-pin::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:#1a243d;
  opacity:var(--gp-fill,0);
}
.glyph-field{z-index:1}
.glyph-art{z-index:2}
.glyph-front{z-index:3}
.glyph-caption,.glyph-scroll{z-index:4}
.glyph-content{
  box-sizing:border-box;
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  width:100%;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(72px,8vw,112px)!important;
  display:grid!important;
  align-content:center!important;
  color:var(--gp-foreground);
  background:transparent!important;
  opacity:var(--gp-reveal,0)!important;
  pointer-events:none;
  overflow:hidden;
}
.glyph-hero[data-entered="true"] .glyph-content{pointer-events:auto}
.glyph-content::before,.glyph-content::after{content:none!important;display:none!important}
.glyph-content>.portal-reveal{position:static!important;z-index:2;opacity:1!important;transform:none!important;max-width:1040px;color:#f4f8ff}

@media(max-width:640px){
  .glyph-hero{
    height:calc(var(--gp-height,100svh) + var(--gp-travel,40vh));
    min-height:calc(var(--gp-height,100svh) + var(--gp-travel,40vh));
  }
  .glyph-content{
    padding:calc(70px + env(safe-area-inset-top,0px)) 18px 30px!important;
    align-content:center!important;
  }
  .glyph-content>.portal-reveal{max-width:none!important}
  .glyph-content .portal-reveal h2{font-size:clamp(30px,8.8vw,39px);line-height:1.03}
  .glyph-content .portal-reveal p{margin-top:15px;font-size:14.5px;line-height:1.54}
  .glyph-content .portal-reveal p.portal-emphasis{margin-top:18px;font-size:14.5px;line-height:1.48}
}


/* GTI360 production v12 — sticky QA fix
   Sticky descendants must not have an overflow-clipping ancestor. The pin itself clips safely. */
.glyph-hero{overflow:visible!important}
.glyph-pin{overflow:clip!important}


/* GTI360 production v13 — mobile sticky root fix
   overflow-x:hidden on html creates a scroll container and breaks sticky in Chromium mobile. */
@media(max-width:640px){
  html,body{overflow-x:clip!important}
}

/* GTI360 production v15 — hero blue-field latch. Once full blue is reached, the 3 clip cannot reappear from viewport jitter. */

/* GTI360 production v17 — preserve desktop composition; mobile-only opening-screen adjustments */

/* Subtle depth for principal headings remains available on both desktop and mobile. */
.portal-reveal h2,
.intro-pre h2,
.intro-item h2,
.explorer-intro h2,
.panel h3,
.case-demo-title,
.eco-head h2,
.resource h3,
.closing h2{
  text-shadow:0 8px 22px rgba(0,0,0,.13);
}
.intro-pre h2,
.intro-item h2,
.eco-head h2,
.resource h3{
  text-shadow:0 8px 20px rgba(26,36,61,.14);
}

/* The extra spacing, larger closing phrase and progressive reveal belong only to mobile.
   Desktop intentionally keeps the v15 opening-screen composition. */
@media(max-width:640px){
  .glyph-content .portal-reveal h2 + p{margin-top:26px!important}
  .glyph-content .portal-reveal p{margin-top:17px;font-size:14.5px;line-height:1.55}
  .glyph-content .portal-reveal p.portal-emphasis{
    margin-top:24px!important;
    font-size:16.5px!important;
    line-height:1.46!important;
  }
  .glyph-content .portal-reveal p.portal-emphasis span{display:block}
  .glyph-content .portal-reveal p.portal-emphasis span + span{margin-top:4px}

  .glyph-content .portal-reveal h2,
  .glyph-content .portal-reveal > p{
    will-change:opacity,transform;
  }
  .glyph-content .portal-reveal h2{
    opacity:var(--hero-title-reveal,0);
    transform:translateY(calc((1 - var(--hero-title-reveal,0)) * 18px));
  }
  .glyph-content .portal-reveal > p:nth-of-type(1){
    opacity:var(--hero-p1-reveal,0);
    transform:translateY(calc((1 - var(--hero-p1-reveal,0)) * 16px));
  }
  .glyph-content .portal-reveal > p:nth-of-type(2){
    opacity:var(--hero-p2-reveal,0);
    transform:translateY(calc((1 - var(--hero-p2-reveal,0)) * 16px));
  }
  .glyph-content .portal-reveal > p.portal-emphasis{
    opacity:var(--hero-emphasis-reveal,0);
    transform:translateY(calc((1 - var(--hero-emphasis-reveal,0)) * 14px));
  }

  .portal-reveal h2,
  .intro-pre h2,
  .intro-item h2,
  .explorer-intro h2,
  .panel h3,
  .case-demo-title,
  .eco-head h2,
  .resource h3,
  .closing h2{ text-shadow:0 6px 16px rgba(0,0,0,.13) }
  .intro-pre h2,.intro-item h2,.eco-head h2,.resource h3{ text-shadow:0 6px 16px rgba(26,36,61,.13) }
}

/* Desktop keeps the v15 single-line emphasis; mobile stacks the two sentences. */
@media(min-width:641px){
  .portal-reveal p.portal-emphasis span{display:inline}
  .portal-reveal p.portal-emphasis span + span::before{content:" "}
}


/* GTI360 production v18 — mobile opening-screen vertical clearance.
   Desktop is intentionally untouched. */
@media(max-width:640px){
  .glyph-content{
    padding:calc(86px + env(safe-area-inset-top,0px)) 18px 24px!important;
  }
  .glyph-content>.portal-reveal{
    position:relative!important;
    top:22px;
  }
  .glyph-content .portal-reveal h2{
    font-size:clamp(29px,8.35vw,37px);
    line-height:1.035;
  }
  .glyph-content .portal-reveal h2 + p{
    margin-top:22px!important;
  }
  .glyph-content .portal-reveal p{
    margin-top:14px!important;
    font-size:13.25px!important;
    line-height:1.47!important;
  }
  .glyph-content .portal-reveal p.portal-emphasis{
    margin-top:19px!important;
    font-size:15.25px!important;
    line-height:1.42!important;
  }
}
