:root{
  --black:#000;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --surface:#f5f5f7;
  --surface-2:#fbfbfd;
  --line:rgba(0,0,0,.08);
  --white:#fff;
  --purple:#8b5cf6;
  --green:#34c759;
  --orange:#ff9f0a;
  --radius:30px;
  --container:min(1180px,calc(100% - 44px));
  --shadow:0 30px 80px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px;overflow-x:clip}
body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","Helvetica Neue",Arial,sans-serif;line-height:1.5;overflow-x:clip;max-width:100%;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
.container{width:var(--container);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Apple-like compact global navigation */
.global-nav{position:fixed;inset:0 0 auto;z-index:1000;height:52px;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.05);transition:background .25s,color .25s}
.global-nav.dark{background:rgba(0,0,0,.72);color:#f5f5f7;border-color:rgba(255,255,255,.08)}
.global-nav .nav-inner{height:52px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.brand-mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,#111827,#7257ff);color:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 7px 16px rgba(69,52,190,.22)}
.brand small{display:block;font-size:9px;color:#86868b;font-weight:600;letter-spacing:0;margin-top:-1px}
.global-nav.dark .brand small{color:#a1a1a6}
.nav-links{display:flex;align-items:center;gap:clamp(13px,1.7vw,22px);font-size:clamp(13px,1.28vw,15px);font-weight:600}
.nav-links a{opacity:.78;transition:opacity .2s;white-space:nowrap}.nav-links a:hover{opacity:1}
.nav-actions{display:flex;align-items:center;gap:9px}
.nav-button{border:0;border-radius:999px;background:var(--blue);color:#fff;padding:7px 15px;font-size:12px;font-weight:700;transition:background .2s,transform .2s}
.nav-button:hover{background:var(--blue-hover);transform:translateY(-1px)}
.menu-button{display:none;width:44px;height:44px;margin:0 -10px;border:0;background:transparent;color:inherit;place-items:center}
.menu-button span,.menu-button:before,.menu-button:after{content:"";display:block;width:17px;height:1.5px;background:currentColor;transition:.25s}.menu-button span{margin:4px 0}
.mobile-menu{display:none}

/* shared typography */
.eyebrow{font-size:clamp(13px,1.5vw,17px);font-weight:700;color:#6e6e73;margin:0 0 12px}
.display{font-size:clamp(38px,7.8vw,104px);line-height:.98;letter-spacing:-.045em;margin:0;font-weight:800}
.display.medium{font-size:clamp(36px,6.2vw,84px);letter-spacing:-.042em}
.headline{font-size:clamp(29px,5vw,68px);line-height:1.05;letter-spacing:-.04em;margin:0;font-weight:800}
.subhead{font-size:clamp(16px,2.1vw,28px);line-height:1.42;color:var(--muted);font-weight:600;letter-spacing:-.015em;margin:22px auto 0;max-width:850px}
.dark-section .subhead,.black .subhead{color:#a1a1a6}
.link-row{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:28px;flex-wrap:wrap}
.text-link{color:var(--blue);font-size:18px;font-weight:600;display:inline-flex;align-items:center;gap:5px}.text-link:after{content:"›";font-size:26px;line-height:1;margin-top:-2px}.text-link:hover{text-decoration:underline}
.primary-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:11px 22px;background:var(--blue);color:#fff;font-weight:700;font-size:16px}.primary-pill:hover{background:var(--blue-hover)}
.section-shell{padding:128px 0}
.section-intro{text-align:center;margin-bottom:64px}

/* Homepage hero */
.hero{min-height:920px;background:#000;color:#f5f5f7;padding:130px 0 0;position:relative;overflow:hidden;text-align:center}
.hero:before{content:"";position:absolute;width:820px;height:820px;left:50%;bottom:-610px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(77,99,255,.65),rgba(142,64,255,.2) 42%,transparent 70%);filter:blur(20px)}
.hero .eyebrow{color:#a1a1a6}
.hero .display span{background:linear-gradient(90deg,#fff 10%,#b7b7ff 50%,#9be5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .subhead{max-width:780px;color:#a1a1a6}
.hero-stage{position:relative;width:min(1120px,96vw);height:570px;margin:72px auto 0;perspective:1800px}
.hero-window{position:absolute;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 50px 140px rgba(0,0,0,.65);border-radius:22px;will-change:transform}
.hero-window img{width:100%;height:100%;object-fit:cover}
.hero-window.sec{width:72%;height:69%;right:4%;top:0;transform:rotateY(-7deg) rotateX(2deg)}
.hero-window.master{width:57%;height:57%;left:3%;bottom:0;z-index:2;transform:rotateY(7deg) rotateX(-1deg)}
.window-bar{height:30px;position:absolute;inset:0 0 auto;background:rgba(247,247,249,.92);border-bottom:1px solid rgba(0,0,0,.06);z-index:2;display:flex;align-items:center;padding:0 11px;gap:5px}
.window-bar i{width:7px;height:7px;border-radius:50%;background:#ff5f57}.window-bar i:nth-child(2){background:#febc2e}.window-bar i:nth-child(3){background:#28c840}
.hero-chip{position:absolute;z-index:5;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);color:#1d1d1f;border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:13px 17px;box-shadow:0 18px 60px rgba(0,0,0,.25);text-align:right}
.hero-chip b{display:block;font-size:13px}.hero-chip small{font-size:10px;color:#6e6e73}.hero-chip.one{left:0;top:17%}.hero-chip.two{right:0;bottom:20%}

/* Product tiles */
.products{background:var(--surface);padding:120px 0}
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.product-tile{min-height:680px;border-radius:var(--radius);overflow:hidden;position:relative;text-align:center;padding:58px 40px 0;background:#fff}
.product-tile.black{background:#000;color:#f5f5f7}.product-tile.gradient{background:linear-gradient(160deg,#e8e8ff,#f9f5ff 50%,#eafaff)}
.product-tile h3{font-size:clamp(30px,4.4vw,60px);letter-spacing:-.04em;line-height:1.03;margin:0 0 10px}.product-tile p{font-size:21px;font-weight:600;color:var(--muted);margin:0 auto;max-width:520px}.product-tile.black p{color:#a1a1a6}
.tile-links{display:flex;justify-content:center;gap:24px;margin-top:20px}.tile-links a{font-size:16px;color:var(--blue);font-weight:600}.tile-links a:after{content:" ›"}
.tile-image{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:92%;height:58%;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -14px 50px rgba(0,0,0,.1);background:#fff}
.tile-image img{width:100%;height:100%;object-fit:cover}
.upcoming-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.small-tile{min-height:330px;border-radius:var(--radius);background:#fff;padding:38px;position:relative;overflow:hidden}.small-tile:nth-child(2){background:#111;color:#fff}.small-tile:nth-child(3){background:linear-gradient(145deg,#fef4e8,#fff)}
.small-tile .tag{font-size:13px;color:var(--orange);font-weight:800}.small-tile h4{font-size:34px;line-height:1.02;letter-spacing:-1.5px;margin:15px 0 10px}.small-tile p{font-size:15px;color:var(--muted);max-width:300px}.small-tile:nth-child(2) p{color:#a1a1a6}.small-tile .ghost{position:absolute;left:22px;bottom:-26px;font-size:112px;font-weight:900;letter-spacing:-7px;opacity:.055;direction:ltr}

/* cinematic sticky story */
.story{background:#000;color:#f5f5f7;padding:140px 0}
.story-intro{text-align:center;max-width:1000px;margin:0 auto 120px}.story-intro .eyebrow{color:#a1a1a6}.story-intro .display{font-size:clamp(36px,6.6vw,92px)}
.story-layout{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:80px;align-items:start}
.story-copy{padding-bottom:25vh}.story-chapter{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .35s,transform .35s;transform:translateY(15px)}
.story-chapter.active{opacity:1;transform:none}
.story-chapter .number{font-size:14px;color:#86868b;font-weight:700}.story-chapter h3{font-size:clamp(27px,3.8vw,54px);letter-spacing:-.036em;line-height:1.05;margin:12px 0 18px}.story-chapter p{font-size:20px;color:#a1a1a6;margin:0;max-width:520px}.story-chapter ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;color:#d2d2d7;font-size:15px}.story-chapter li:before{content:"✓";color:#64d28c;margin-left:9px;font-weight:900}
.story-visual{position:sticky;top:110px;height:72vh;min-height:560px;display:grid;place-items:center}
.story-device{width:100%;height:100%;max-height:650px;border-radius:28px;padding:10px;background:linear-gradient(145deg,#242424,#080808);box-shadow:0 55px 130px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.12);position:relative}
.story-device:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:99px;background:#454545;z-index:3}
.story-image-wrap{height:100%;border-radius:21px;overflow:hidden;background:#151515}.story-image-wrap img{width:100%;height:100%;object-fit:cover;transition:opacity .22s,transform .6s;transform:scale(1.002)}
.story-caption{position:absolute;right:28px;bottom:27px;background:rgba(0,0,0,.65);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:12px 15px;max-width:55%}.story-caption b{font-size:15px}.story-caption small{display:block;color:#c7c7cc;font-size:13px;line-height:1.4;margin-top:3px}

/* MasterSheet full bleed */
.master-feature{background:#fff;padding:140px 0 0;text-align:center;overflow:hidden}.master-feature .subhead{max-width:820px}.master-frame{width:min(1260px,94vw);height:720px;margin:70px auto 0;background:#111;border-radius:34px 34px 0 0;padding:12px 12px 0;box-shadow:0 45px 120px rgba(0,0,0,.22);position:relative}.master-frame:before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:70px;height:5px;border-radius:99px;background:#444}.master-frame img{width:100%;height:100%;object-fit:cover;border-radius:25px 25px 0 0}
.master-points{background:var(--surface);padding:80px 0}.point-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.point{padding:22px 10px;text-align:center}.point strong{display:block;font-size:26px;letter-spacing:-1px}.point span{font-size:15px;color:var(--muted)}

/* integration */
.integration{background:#000;color:#fff;padding:150px 0;text-align:center;overflow:hidden}.integration .display{font-size:clamp(34px,8.4vw,118px)}.integration .display .gradient-text{background:linear-gradient(90deg,#7f7cff,#bc7cff,#62d7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.integration-flow{margin:90px auto 0;max-width:1120px;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:20px}
.flow-panel{border-radius:26px;overflow:hidden;background:#1c1c1e;border:1px solid rgba(255,255,255,.1);padding:10px;box-shadow:0 35px 100px rgba(0,0,0,.45)}.flow-panel img{width:100%;aspect-ratio:1.6/1;object-fit:cover;border-radius:18px}.flow-panel h3{font-size:24px;margin:22px 0 4px}.flow-panel p{font-size:14px;color:#a1a1a6;margin:0 15px 22px}
.flow-center{display:flex;flex-direction:column;align-items:center;gap:12px}.flow-line{height:2px;width:150px;background:linear-gradient(90deg,transparent,#7e7cff,#62d7ff,transparent);position:relative}.flow-line:after{content:"›";position:absolute;right:44%;top:-18px;font-size:30px;color:#8ea6ff}.flow-badge{font-size:12px;color:#a1a1a6}
.integration-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:70px;text-align:right}.benefit{border-top:1px solid rgba(255,255,255,.18);padding-top:22px}.benefit strong{font-size:22px}.benefit p{font-size:14px;color:#a1a1a6;margin:8px 0 0}

/* account and governance */
.account-section{background:var(--surface);padding:140px 0}.account-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}.account-copy .headline{font-size:clamp(42px,5.4vw,70px)}.account-copy p{font-size:21px;color:var(--muted);font-weight:600}.account-list{list-style:none;padding:0;margin:34px 0;display:grid;gap:14px}.account-list li{font-size:16px;font-weight:600}.account-list li:before{content:"✓";display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8f8ee;color:#1a9e4d;margin-left:10px}
.account-card{background:#fff;border-radius:32px;padding:24px;box-shadow:var(--shadow)}.account-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px}.org{display:flex;gap:12px;align-items:center}.org-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#171a2d,#7359ff);color:#fff;display:grid;place-items:center;font-weight:800}.portal-org small{display:block;margin-top:1px}.org b{display:block}.org small{color:var(--muted)}.status{background:#eaf9ef;color:#1d8f49;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800}
.account-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.metric{background:var(--surface);border-radius:18px;padding:17px}.metric small{display:block;color:var(--muted);font-size:11px}.metric b{font-size:28px}
.account-products{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-product{border:1px solid var(--line);border-radius:20px;padding:18px}.account-product h4{font-size:18px;margin:0}.account-product p{font-size:12px;color:var(--muted);min-height:37px}.account-product footer{display:flex;justify-content:space-between;align-items:center}.account-product footer span{font-size:10px;color:#1d8f49;font-weight:800}.account-product footer button{border:0;border-radius:999px;background:#1d1d1f;color:#fff;padding:7px 12px;font-size:10px}
.governance{padding:140px 0;background:#fff}.governance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.governance-card{background:var(--surface);border-radius:26px;padding:34px;min-height:300px;position:relative;overflow:hidden}.governance-card:nth-child(2){background:#000;color:#fff}.governance-card:nth-child(2) p{color:#a1a1a6}.governance-card:nth-child(3){background:linear-gradient(145deg,#f3edff,#eefaff)}.governance-card .icon{font-size:36px}.governance-card h3{font-size:30px;line-height:1.02;letter-spacing:-1.2px;margin:32px 0 12px}.governance-card p{font-size:15px;color:var(--muted)}.governance-card .watermark{position:absolute;left:18px;bottom:-44px;font-size:125px;font-weight:900;opacity:.04;direction:ltr}

/* final CTA and footer */
.final-cta{background:#000;color:#fff;text-align:center;padding:145px 0}.final-cta .headline{max-width:1000px;margin:auto}.final-cta p{font-size:22px;color:#a1a1a6;font-weight:600;margin:24px auto 0;max-width:720px}
.footer{background:var(--surface);padding:34px 0 22px;color:#6e6e73;font-size:11px}.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:28px}.footer h4{color:#1d1d1f;font-size:12px;margin:0 0 12px}.footer a{display:block;margin:8px 0}.footer a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid rgba(0,0,0,.12);padding-top:18px;display:flex;justify-content:space-between;gap:20px}

/* product pages */
.product-hero{padding:140px 0 90px;text-align:center;background:#000;color:#fff;min-height:820px;overflow:hidden}.product-hero.light{background:#fff;color:var(--ink)}.product-hero .display{font-size:clamp(40px,10.5vw,150px)}.product-hero .subhead{max-width:780px}.product-hero-frame{width:min(1180px,94vw);height:610px;margin:70px auto 0;border-radius:30px;background:#151515;padding:10px;box-shadow:0 45px 120px rgba(0,0,0,.45);overflow:hidden}.product-hero.light .product-hero-frame{box-shadow:0 40px 100px rgba(0,0,0,.18)}.product-hero-frame img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.feature-sequence{padding:130px 0;background:#fff}.feature-sequence.dark{background:#000;color:#fff}.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:130px}.feature-row:last-child{margin-bottom:0}.feature-row:nth-child(even) .feature-copy{order:2}.feature-copy h2{font-size:clamp(29px,4.6vw,62px);line-height:1.05;letter-spacing:-.04em;margin:0 0 18px}.feature-copy p{font-size:20px;color:var(--muted);font-weight:600}.feature-sequence.dark .feature-copy p{color:#a1a1a6}.feature-image{border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.feature-image img{width:100%;aspect-ratio:1.6/1;object-fit:cover}

/* policy / checkout fallback */
.page-plain{padding:110px 0;background:var(--surface);min-height:100vh}.plain-card{background:#fff;border-radius:28px;padding:50px;box-shadow:0 18px 70px rgba(0,0,0,.08);max-width:900px;margin:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){
  .nav-links{display:none}.menu-button{display:grid}.nav-actions .nav-button{display:none}
  .mobile-menu{position:fixed;z-index:999;inset:52px 0 auto;background:rgba(255,255,255,.99);backdrop-filter:blur(24px);padding:18px 22px 28px;display:grid;gap:0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s;color:#1d1d1f;box-shadow:0 25px 60px rgba(0,0,0,.14)}.mobile-menu.open{opacity:1;visibility:visible;transform:none}.mobile-menu a{font-size:24px;font-weight:700;padding:14px 0;border-bottom:1px solid var(--line)}
  .story-layout{grid-template-columns:1fr}.story-copy{padding-bottom:0}.story-chapter{min-height:auto;padding:70px 0;opacity:1}.story-visual{position:relative;top:auto;height:62vw;min-height:450px;order:-1;margin-bottom:40px}.story-chapter:not(:first-child){border-top:1px solid rgba(255,255,255,.12)}
  .account-layout{grid-template-columns:1fr}.account-copy{text-align:center}.account-list{max-width:520px;margin-inline:auto;text-align:right}.integration-flow{grid-template-columns:1fr}.flow-center{transform:rotate(90deg);height:80px}.point-row,.governance-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  :root{--container:calc(100% - 26px);--radius:22px}.section-shell{padding:90px 0}.global-nav .nav-inner{height:52px}.brand small{display:none}
  .subhead{font-size:20px}.hero{min-height:760px;padding-top:110px}.hero-stage{height:400px;margin-top:55px}.hero-window.sec{width:90%;height:63%;right:0}.hero-window.master{width:76%;height:48%;left:0}.hero-chip{display:none}
  .hero .link-row,.product-hero .link-row{flex-direction:column;gap:14px}.hero .link-row>*,.product-hero .link-row>*{width:100%;max-width:320px;justify-content:center}
  .products{padding:90px 0}.tile-grid{grid-template-columns:1fr}.product-tile{min-height:590px;padding:45px 22px 0}.product-tile p{font-size:18px}.upcoming-grid{grid-template-columns:1fr}.small-tile{min-height:280px}
  .story{padding:100px 0}.story-intro{margin-bottom:45px}.story-visual{height:70vw;min-height:330px}.story-device{border-radius:20px}.story-image-wrap{border-radius:14px}.story-caption{right:17px;bottom:16px;max-width:75%}.story-chapter p{font-size:18px}
  .master-feature{padding-top:100px}.master-frame{height:62vw;min-height:330px;border-radius:23px 23px 0 0;padding:8px 8px 0}.master-frame img{border-radius:17px 17px 0 0}.point-row{grid-template-columns:1fr}.point{border-bottom:1px solid var(--line)}
  .integration{padding:105px 0}.integration-benefits{grid-template-columns:1fr 1fr}.account-section,.governance{padding:100px 0}.account-card{padding:15px;border-radius:24px}.account-metrics{grid-template-columns:1fr}.account-products{grid-template-columns:1fr}.governance-grid{grid-template-columns:1fr}.governance-card{min-height:250px}
  .final-cta{padding:105px 0}.footer-top{grid-template-columns:1fr 1fr}.footer-top>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column}
  .product-hero{padding:110px 0 70px;min-height:650px}.product-hero .product-hero-frame{height:55vw;min-height:300px;margin-top:50px}.feature-sequence{padding:95px 0}.feature-row{grid-template-columns:1fr;gap:30px;margin-bottom:90px}.feature-row:nth-child(even) .feature-copy{order:0}.feature-copy{text-align:center}.feature-copy p{font-size:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* =========================================================
   Apple system typography + smoother Slide & Fade motion
   Uses locally available system fonts only; no font files.
   ========================================================= */
:root{
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Arabic","Helvetica Neue",Arial,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","Helvetica Neue",Arial,sans-serif;
  --ease-apple:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --motion-fast:520ms;
  --motion-main:980ms;
  --motion-long:1250ms;
}
html{
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
body{
  font-family:var(--font-text);
  font-feature-settings:"kern" 1,"liga" 1;
  letter-spacing:-.015em;
}
.display,.headline,.product-tile h3,.small-tile h4,.story-chapter h3,
.feature-copy h2,.governance-card h3,.product-hero .display{
  font-family:var(--font-display);
  font-synthesis:none;
}
.display,.headline{
  letter-spacing:-.055em;
}
.subhead,.story-chapter p,.feature-copy p,.final-cta p{
  letter-spacing:-.024em;
}

/* Soft page entrance and exit */
.js body{
  opacity:0;
  transform:translate3d(0,8px,0);
}
.js body.page-ready{
  opacity:1;
  transform:none;
  transition:opacity 680ms var(--ease-soft),transform 880ms var(--ease-apple);
}
body.page-leaving{
  opacity:0!important;
  transform:translate3d(0,-8px,0)!important;
  transition:opacity 260ms ease,transform 260ms ease!important;
}

/* Top reading progress */
.motion-progress{
  position:fixed;
  inset:0 0 auto;
  height:2px;
  z-index:2500;
  pointer-events:none;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,#0071e3,#8b5cf6,#64d2ff);
  box-shadow:0 0 12px rgba(0,113,227,.35);
}

/* Main reveal system */
.js .reveal{
  --reveal-x:0px;
  --reveal-y:38px;
  --reveal-scale:.99;
  --reveal-blur:8px;
  --reveal-delay:0ms;
  opacity:0;
  filter:blur(var(--reveal-blur));
  transform:
    translate3d(var(--reveal-x),var(--reveal-y),0)
    scale(var(--reveal-scale));
  transition:
    opacity var(--motion-main) var(--ease-soft),
    transform var(--motion-long) var(--ease-apple),
    filter var(--motion-main) var(--ease-soft);
  transition-delay:var(--reveal-delay);
  will-change:opacity,transform,filter;
}
.js .reveal.visible{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}
.js .reveal.slide-left{--reveal-x:-44px;--reveal-y:8px}
.js .reveal.slide-right{--reveal-x:44px;--reveal-y:8px}
.js .reveal.fade-scale{--reveal-y:18px;--reveal-scale:.94}
.js .reveal.fade-only{--reveal-y:0px;--reveal-scale:1}

/* Hero choreography */
.hero .eyebrow.reveal,.product-hero .eyebrow.reveal{--reveal-delay:0ms}
.hero .display.reveal,.product-hero .display.reveal{--reveal-delay:70ms;--reveal-y:34px}
.hero .subhead.reveal,.product-hero .subhead.reveal{--reveal-delay:150ms}
.hero .link-row.reveal,.product-hero .link-row.reveal{--reveal-delay:210ms}
.hero-stage.reveal,.product-hero-frame.reveal{--reveal-delay:280ms;--reveal-y:54px;--reveal-scale:.97}

.hero-window{
  transition:
    translate 850ms var(--ease-apple),
    transform 1100ms var(--ease-apple),
    box-shadow 900ms var(--ease-soft);
}
.hero-stage.visible .hero-window.sec{
  animation:heroWindowSec 1250ms 420ms var(--ease-apple) both;
}
.hero-stage.visible .hero-window.master{
  animation:heroWindowMaster 1350ms 520ms var(--ease-apple) both;
}
.hero-stage.visible .hero-chip.one{
  animation:chipInLeft 950ms 760ms var(--ease-apple) both;
}
.hero-stage.visible .hero-chip.two{
  animation:chipInRight 950ms 860ms var(--ease-apple) both;
}
@keyframes heroWindowSec{
  from{opacity:0;filter:blur(12px);transform:translate3d(90px,45px,0) rotateY(-13deg) rotateX(5deg) scale(.94)}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) rotateY(-7deg) rotateX(2deg) scale(1)}
}
@keyframes heroWindowMaster{
  from{opacity:0;filter:blur(12px);transform:translate3d(-80px,60px,0) rotateY(13deg) rotateX(-4deg) scale(.93)}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) rotateY(7deg) rotateX(-1deg) scale(1)}
}
@keyframes chipInLeft{
  from{opacity:0;filter:blur(8px);transform:translate3d(-35px,18px,0) scale(.94)}
  to{opacity:1;filter:blur(0);transform:none}
}
@keyframes chipInRight{
  from{opacity:0;filter:blur(8px);transform:translate3d(35px,18px,0) scale(.94)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* Product cards: smoother lift and image slide */
.product-tile,.small-tile,.governance-card,.account-card,.flow-panel,.feature-image{
  transition:
    transform 950ms var(--ease-apple),
    box-shadow 850ms var(--ease-soft),
    border-color 550ms ease;
}
.product-tile:hover,.small-tile:hover,.governance-card:hover{
  transform:translate3d(0,-10px,0) scale(1.005);
}
.tile-image img,.feature-image img,.flow-panel img,.master-frame img,.product-hero-frame img{
  transition:transform 1600ms var(--ease-apple),filter 900ms var(--ease-soft);
  will-change:transform;
}
.product-tile:hover .tile-image img,
.feature-row:hover .feature-image img,
.flow-panel:hover img{
  transform:scale(1.025) translate3d(0,-3px,0);
}

/* Sticky SEC chapters: slide + fade without abrupt switching */
.story-chapter{
  opacity:.16;
  filter:blur(4px);
  transform:translate3d(42px,34px,0) scale(.985);
  transition:
    opacity 720ms var(--ease-soft),
    transform 1050ms var(--ease-apple),
    filter 720ms var(--ease-soft);
}
.story-chapter.active{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}
.story-chapter.active h3{
  animation:chapterTitleIn 900ms var(--ease-apple) both;
}
.story-chapter.active p,
.story-chapter.active ul{
  animation:chapterCopyIn 1050ms 80ms var(--ease-apple) both;
}
@keyframes chapterTitleIn{
  from{opacity:0;transform:translate3d(28px,24px,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes chapterCopyIn{
  from{opacity:0;transform:translate3d(20px,28px,0);filter:blur(5px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* True two-layer crossfade for the sticky screenshots */
.story-image-wrap{
  position:relative;
  isolation:isolate;
}
.story-image-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  filter:blur(8px);
  transform:translate3d(var(--story-x,34px),0,0) scale(1.025);
  transition:
    opacity 820ms var(--ease-soft),
    transform 1200ms var(--ease-apple),
    filter 820ms var(--ease-soft);
  will-change:opacity,transform,filter;
}
.story-image-wrap img.is-active{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1.002);
  z-index:2;
}
.story-image-wrap img.is-leaving{
  opacity:0;
  filter:blur(5px);
  transform:translate3d(var(--story-leave-x,-28px),0,0) scale(1.012);
  z-index:1;
}
.story-caption{
  transition:opacity 520ms var(--ease-soft),transform 760ms var(--ease-apple);
}
.story-caption.is-changing{
  opacity:.25;
  transform:translate3d(0,10px,0);
}

/* Flow animation */
.integration-flow.visible .flow-line{
  animation:flowLine 1600ms 260ms var(--ease-apple) both;
  transform-origin:right center;
}
.integration-flow.visible .flow-badge{
  animation:flowBadge 900ms 760ms var(--ease-apple) both;
}
@keyframes flowLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes flowBadge{from{opacity:0;transform:translate3d(0,18px,0) scale(.94)}to{opacity:1;transform:none}}

/* Continuous but subtle scroll depth */
[data-motion-depth]{
  translate:0 var(--motion-translate,0px);
  will-change:translate;
}

/* Button feedback */
.primary-pill,.nav-button{
  transition:
    background 240ms ease,
    transform 520ms var(--ease-apple),
    box-shadow 520ms var(--ease-soft);
}
.primary-pill:hover,.nav-button:hover{
  transform:translate3d(0,-2px,0) scale(1.012);
  box-shadow:0 12px 30px rgba(0,113,227,.22);
}
.primary-pill:active,.nav-button:active{
  transform:scale(.97);
  transition-duration:120ms;
}

/* Mobile motion remains polished but lighter */
@media(max-width:720px){
  .js .reveal{--reveal-y:38px;--reveal-scale:.99;filter:blur(6px)}
  .js .reveal.slide-left,.js .reveal.slide-right{--reveal-x:0px;--reveal-y:40px}
  .story-chapter{filter:none;transform:translate3d(0,26px,0)}
  .story-chapter.active{transform:none}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .js body,.js body.page-ready,body.page-leaving{opacity:1!important;transform:none!important}
  .motion-progress{display:none}
  .js .reveal,.js .reveal.visible,.story-chapter,.story-chapter.active,
  .story-image-wrap img,.story-image-wrap img.is-active,.story-image-wrap img.is-leaving{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important;animation:none!important
  }
}


/* =========================================================
   Arabic typography correction
   Keeps the Apple-inspired visual system while preventing
   Arabic glyph overlap and cramped lines.
   ========================================================= */
html[dir="rtl"] body{
  font-family:"Tajawal","SF Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0;
  font-feature-settings:normal;
  font-kerning:auto;
  font-variant-ligatures:contextual common-ligatures;
  line-height:1.75;
}

html[dir="rtl"] .display,
html[dir="rtl"] .headline,
html[dir="rtl"] .product-tile h3,
html[dir="rtl"] .small-tile h4,
html[dir="rtl"] .story-chapter h3,
html[dir="rtl"] .feature-copy h2,
html[dir="rtl"] .governance-card h3,
html[dir="rtl"] .product-hero .display,
html[dir="rtl"] .final-cta h2,
html[dir="rtl"] .account-page-intro h1{
  font-family:"Tajawal","SF Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:-.018em;
  line-height:1.2;
  font-feature-settings:normal;
  word-spacing:normal;
  text-wrap:balance;
}

html[dir="rtl"] .display{
  line-height:1.22;
  padding-block:.02em;
}

html[dir="rtl"] .headline{
  line-height:1.22;
}

html[dir="rtl"] .subhead,
html[dir="rtl"] .story-chapter p,
html[dir="rtl"] .feature-copy p,
html[dir="rtl"] .final-cta p,
html[dir="rtl"] .product-tile p,
html[dir="rtl"] .small-tile p,
html[dir="rtl"] .governance-card p{
  font-family:"Tajawal","SF Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0;
  line-height:1.9;
  word-spacing:normal;
}

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .global-nav,
html[dir="rtl"] .mobile-menu,
html[dir="rtl"] .primary-pill,
html[dir="rtl"] .nav-button,
html[dir="rtl"] .text-link,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select{
  font-family:"Tajawal","SF Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] small,
html[dir="rtl"] strong{
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

html[dir="rtl"] .display em,
html[dir="rtl"] .headline em{
  display:inline;
  line-height:inherit;
}

/* Give Arabic headlines a little more vertical breathing room. */
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .product-hero-copy,
html[dir="rtl"] .section-intro,
html[dir="rtl"] .story-intro,
html[dir="rtl"] .feature-copy,
html[dir="rtl"] .final-cta{
  padding-block:.08em;
}

@media(max-width:720px){
  html[dir="rtl"] .display{
    line-height:1.22;
    letter-spacing:-.012em;
  }
  html[dir="rtl"] .headline,
  html[dir="rtl"] .product-tile h3,
  html[dir="rtl"] .story-chapter h3{
    line-height:1.28;
    letter-spacing:-.01em;
  }
  html[dir="rtl"] .subhead,
  html[dir="rtl"] p{
    line-height:1.85;
  }
}


/* =========================================================
   Bidirectional, repeatable Slide & Fade
   Animates on every viewport entry — scrolling down or up.
   ========================================================= */
.js .reveal{
  /* Horizontal direction remains controlled by slide-left / slide-right. */
  transform:
    translate3d(var(--reveal-x),var(--motion-y,var(--reveal-y)),0)
    scale(var(--reveal-scale));
  transition:
    opacity 760ms var(--ease-soft),
    transform 1050ms var(--ease-apple),
    filter 760ms var(--ease-soft);
}

/* Entering while scrolling down: start below. */
.js .reveal.enter-from-bottom{
  --motion-y:54px;
  filter:blur(var(--reveal-blur,8px));
}

/* Entering while scrolling up: start above. */
.js .reveal.enter-from-top{
  --motion-y:-54px;
  filter:blur(var(--reveal-blur,8px));
}

/* Leaving through the top or bottom. */
.js .reveal.exit-up{
  --motion-y:-42px;
  --reveal-scale:.992;
}
.js .reveal.exit-down{
  --motion-y:42px;
  --reveal-scale:.992;
}

/* Visible state always settles at the natural position. */
.js .reveal.visible,
.js .reveal.enter-from-top.visible,
.js .reveal.enter-from-bottom.visible{
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}

/* Re-run hero choreography each time the hero re-enters. */
.hero-stage:not(.visible) .hero-window,
.hero-stage:not(.visible) .hero-chip{
  animation:none!important;
}

/* Keep repeated movements elegant rather than exaggerated. */
.product-tile.reveal,
.small-tile.reveal,
.feature-row.reveal,
.governance-card.reveal,
.flow-panel.reveal{
  transition-duration:760ms,1050ms,760ms;
}

/* Sticky story chapters now clearly respond in both directions. */
.story-chapter{
  --chapter-y:30px;
}
html[data-scroll-direction="up"] .story-chapter:not(.active){
  --chapter-y:-30px;
}
html[data-scroll-direction="down"] .story-chapter:not(.active){
  --chapter-y:30px;
}
.story-chapter:not(.active){
  transform:translate3d(36px,var(--chapter-y),0) scale(.985);
}
html[data-scroll-direction="up"] .story-chapter:not(.active){
  transform:translate3d(-36px,var(--chapter-y),0) scale(.985);
}

@media(max-width:720px){
  .js .reveal.enter-from-bottom{--motion-y:38px}
  .js .reveal.enter-from-top{--motion-y:-38px}
  .js .reveal.exit-up{--motion-y:-30px}
  .js .reveal.exit-down{--motion-y:30px}
  .story-chapter:not(.active),
  html[data-scroll-direction="up"] .story-chapter:not(.active),
  html[data-scroll-direction="down"] .story-chapter:not(.active){
    transform:translate3d(0,var(--chapter-y),0);
  }
}

@media(prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal.enter-from-top,
  .js .reveal.enter-from-bottom,
  .js .reveal.exit-up,
  .js .reveal.exit-down{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   Interactive v7 — hero carousel, ecosystem, hotspots,
   comparison, product subnav, and mobile improvements.
   ========================================================= */

/* Hero program carousel */
.hero-copy-block{
  min-height:315px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-carousel[data-slide-dir="next"] .hero-copy-block.is-changing{
  animation:heroCopyNext 560ms var(--ease-apple) both;
}
.hero-carousel[data-slide-dir="prev"] .hero-copy-block.is-changing{
  animation:heroCopyPrev 560ms var(--ease-apple) both;
}
@keyframes heroCopyNext{
  0%{opacity:1;transform:none;filter:blur(0)}
  45%{opacity:0;transform:translate3d(-34px,0,0);filter:blur(7px)}
  55%{opacity:0;transform:translate3d(34px,0,0);filter:blur(7px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes heroCopyPrev{
  0%{opacity:1;transform:none;filter:blur(0)}
  45%{opacity:0;transform:translate3d(34px,0,0);filter:blur(7px)}
  55%{opacity:0;transform:translate3d(-34px,0,0);filter:blur(7px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.hero-stage.is-switching .hero-window{
  opacity:.14;
  filter:blur(10px);
}
.hero-stage.is-switching .hero-window.sec{transform:translate3d(55px,24px,0) rotateY(-10deg) scale(.97)}
.hero-stage.is-switching .hero-window.master{transform:translate3d(-55px,24px,0) rotateY(10deg) scale(.97)}
.hero-selector{
  width:min(560px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:5px;
  margin:36px auto 28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(20px);
}
.hero-selector-button{
  border:0;
  border-radius:13px;
  background:transparent;
  color:#aeb5c8;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background 440ms var(--ease-apple),color 320ms ease,transform 440ms var(--ease-apple);
}
.hero-selector-button span{font-weight:800}
.hero-selector-button small{font-size:10px}
.hero-selector-button.active{
  color:#111;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.hero-selector-button:active{transform:scale(.97)}
.hero-auto-progress{
  width:min(260px,60%);
  height:2px;
  margin:25px auto 0;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.13);
}
.hero-auto-progress i{
  display:block;
  height:100%;
  width:100%;
  transform-origin:right center;
  background:#fff;
}
.hero-auto-progress.playing i{animation:heroAutoProgress 6500ms linear both}
@keyframes heroAutoProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Ecosystem map */
.ecosystem-section{padding:150px 0;background:#f5f5f7;overflow:hidden}
.ecosystem-shell{
  border-radius:36px;
  background:#fff;
  padding:38px;
  box-shadow:0 24px 80px rgba(0,0,0,.075);
  border:1px solid rgba(0,0,0,.055);
}
.ecosystem-track{
  display:grid;
  grid-template-columns:1fr 70px 1fr 70px 1fr 70px 1fr 70px 1fr;
  align-items:center;
}
.ecosystem-node{
  border:0;
  background:transparent;
  color:#6e6e73;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:120px;
  padding:12px 6px;
  transition:transform 650ms var(--ease-apple),color 350ms ease;
}
.ecosystem-node:hover,.ecosystem-node.active{color:#111;transform:translateY(-5px)}
.ecosystem-node b{font-size:14px}.ecosystem-node small{font-size:10px}
.ecosystem-icon{
  width:68px;height:68px;border-radius:22px;
  display:grid;place-items:center;
  background:#eef0f4;color:#111;
  font-weight:900;font-size:17px;
  transition:transform 650ms var(--ease-apple),box-shadow 650ms var(--ease-soft),background 350ms ease;
}
.ecosystem-node.active .ecosystem-icon{
  transform:scale(1.08);
  box-shadow:0 18px 42px rgba(0,113,227,.2);
  background:#0071e3;color:#fff;
}
.sec-color{background:#1d1d1f;color:#fff}.connect-color{background:linear-gradient(135deg,#0071e3,#8b5cf6);color:#fff}
.master-color{background:linear-gradient(135deg,#173a5e,#69b83e);color:#fff}.future-color{background:#eee8ff;color:#6941c6}
.ecosystem-connector{height:2px;background:#d9dbe1;position:relative;overflow:hidden}
.ecosystem-connector i{position:absolute;inset:0;transform:scaleX(0);transform-origin:right;background:linear-gradient(90deg,#0071e3,#8b5cf6);transition:transform 650ms var(--ease-apple)}
.ecosystem-connector.active i{transform:scaleX(1)}
.ecosystem-detail{
  margin-top:38px;
  border-radius:26px;
  padding:30px;
  display:grid;
  grid-template-columns:1.25fr .95fr auto;
  gap:30px;
  align-items:center;
  background:#f5f5f7;
  transition:opacity 380ms ease,transform 620ms var(--ease-apple);
}
.ecosystem-detail.is-changing{opacity:.15;transform:translateY(12px)}
.ecosystem-step{font-size:11px;color:#0071e3;font-weight:800}
.ecosystem-detail h3{font-size:30px;line-height:1.25;margin:5px 0 8px}
.ecosystem-detail p{margin:0;color:#6e6e73;max-width:660px}
.ecosystem-detail ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ecosystem-detail li{font-size:12px;display:flex;gap:7px}
.ecosystem-detail li:before{content:"✓";color:#34c759;font-weight:900}

/* Product explorer / hotspots */
.product-explorer{padding:150px 0;background:#fff;overflow:hidden}
.explorer-tabs{
  width:max-content;
  margin:0 auto 28px;
  padding:5px;
  border-radius:999px;
  background:#ececef;
  display:flex;
}
.explorer-tab{
  border:0;background:transparent;border-radius:999px;padding:10px 25px;font-weight:800;color:#6e6e73;
  transition:background 400ms var(--ease-apple),color 300ms ease,transform 400ms var(--ease-apple)
}
.explorer-tab.active{background:#1d1d1f;color:#fff;box-shadow:0 7px 20px rgba(0,0,0,.16)}
.explorer-shell{display:grid;grid-template-columns:1.4fr .6fr;gap:22px;align-items:stretch}
.explorer-canvas{position:relative;min-height:640px;border-radius:34px;background:#0b0c10;padding:14px;box-shadow:0 32px 90px rgba(0,0,0,.18);overflow:hidden}
.explorer-screen{position:relative;height:100%;min-height:580px;border-radius:24px;overflow:hidden;background:#e9eaef}
.explorer-screen img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1150ms var(--ease-apple),filter 700ms ease,opacity 500ms ease;
  transform-origin:50% 50%;
}
.explorer-canvas.zoomed .explorer-screen img{transform:scale(1.48)}
.explorer-canvas.switching .explorer-screen img{opacity:.15;filter:blur(12px);transform:scale(.96)}
.hotspot-layer{position:absolute;inset:0;pointer-events:none}
.hotspot{
  position:absolute;translate:50% -50%;
  width:34px;height:34px;border-radius:50%;border:0;
  color:#fff;background:#0071e3;pointer-events:auto;
  box-shadow:0 0 0 8px rgba(0,113,227,.18),0 8px 24px rgba(0,0,0,.25);
  display:grid;place-items:center;font-weight:900;font-size:11px;
  transition:opacity 400ms ease,transform 560ms var(--ease-apple),background 300ms ease;
  animation:hotspotPulse 2.4s ease-in-out infinite;
}
.hotspot:hover,.hotspot.active{background:#fff;color:#0071e3;transform:scale(1.14)}
.explorer-canvas.zoomed .hotspot:not(.active){opacity:0;pointer-events:none}
@keyframes hotspotPulse{50%{box-shadow:0 0 0 15px rgba(0,113,227,0),0 8px 24px rgba(0,0,0,.25)}}
.explorer-toolbar{position:absolute;z-index:6;left:28px;bottom:28px;display:flex;gap:8px}
.explorer-toolbar button{
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 13px;
  background:rgba(15,15,18,.78);backdrop-filter:blur(14px);color:#fff;font-size:11px
}
.explorer-panel{
  border-radius:34px;background:#f5f5f7;padding:38px;display:flex;flex-direction:column;justify-content:center;
  min-height:640px;transition:opacity 350ms ease,transform 600ms var(--ease-apple)
}
.explorer-panel.is-changing{opacity:.1;transform:translateX(-16px)}
.explorer-counter{font-size:11px;color:#86868b;font-weight:800}
.explorer-panel h3{font-size:35px;line-height:1.22;margin:8px 0 12px}
.explorer-panel>p:not(.eyebrow){color:#6e6e73}
.explorer-panel ul{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px}
.explorer-panel li{font-size:12px;display:flex;gap:8px}.explorer-panel li:before{content:"✓";color:#34c759;font-weight:900}
.explorer-controls{display:flex;gap:9px;margin-top:12px}
.explorer-controls button{width:44px;height:44px;border-radius:50%;border:0;background:#1d1d1f;color:#fff;font-size:18px}

/* Comparison */
.comparison-section{padding:150px 0;background:#f5f5f7}
.comparison-table{border-radius:34px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.065);box-shadow:0 28px 90px rgba(0,0,0,.07)}
.comparison-row{display:grid;grid-template-columns:1.1fr repeat(3,1fr);border-bottom:1px solid #e8e8ed}
.comparison-row:last-child{border-bottom:0}
.comparison-row>div{padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:3px;border-left:1px solid #eeeeF2}
.comparison-row>div:last-child{border-left:0}.comparison-row b,.comparison-row strong,.comparison-row span{font-size:13px}.comparison-row small{font-size:10px;color:#6e6e73;line-height:1.65}
.comparison-head{background:#1d1d1f;color:#fff}.comparison-head small{color:#a9a9af}
.comparison-row .amss-column{background:#f0f7ff}.comparison-head .amss-column{background:#0071e3;color:#fff}.comparison-head .amss-column small{color:#d8ebff}
.comparison-note{text-align:center;color:#86868b;font-size:11px;max-width:760px;margin:22px auto 0}

/* Product sticky sub-navigation */
.product-subnav{
  position:sticky;top:52px;z-index:850;
  height:58px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.1)
}
.product-subnav-inner{height:58px;display:flex;align-items:center;gap:24px}
.product-subnav-name{text-decoration:none;color:#1d1d1f;display:flex;align-items:baseline;gap:8px;min-width:max-content}
.product-subnav-name b{font-size:16px}.product-subnav-name small{font-size:10px;color:#6e6e73}
.product-subnav-links{display:flex;align-items:center;gap:22px;margin-inline:auto}
.product-subnav-links a{position:relative;text-decoration:none;color:#6e6e73;font-size:11px;font-weight:700;white-space:nowrap}
.product-subnav-links a:after{content:"";position:absolute;right:0;left:0;bottom:-18px;height:2px;background:#0071e3;transform:scaleX(0);transition:transform 450ms var(--ease-apple)}
.product-subnav-links a.active{color:#111}.product-subnav-links a.active:after{transform:scaleX(1)}
.product-subnav-cta{font-size:11px;text-decoration:none;color:#fff;background:#0071e3;border-radius:999px;padding:7px 13px;white-space:nowrap}.product-subnav-inner .product-subnav-cta{display:none}

/* Mobile sticky CTA and touch improvements */
.mobile-sticky-cta{display:none}
@media(max-width:900px){
  .ecosystem-shell{padding:24px 0 24px 24px;overflow:hidden}
  .ecosystem-track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:12px 20px 18px 0;
    scrollbar-width:none
  }
  .ecosystem-track::-webkit-scrollbar{display:none}
  .ecosystem-node{scroll-snap-align:center;flex:0 0 135px}
  .ecosystem-connector{flex:0 0 54px}
  .ecosystem-detail{margin:20px 20px 0 0;grid-template-columns:1fr}
  .explorer-shell{grid-template-columns:1fr}.explorer-panel{min-height:auto}
  .product-subnav-links{overflow-x:auto;scrollbar-width:none;margin-inline:0;flex:1}.product-subnav-links::-webkit-scrollbar{display:none}
}
@media(max-width:720px){
  body{padding-bottom:70px}
  .hero-copy-block{min-height:350px}
  .hero-selector{border-radius:16px}.hero-selector-button{flex-direction:column;gap:1px;padding:9px 5px}.hero-selector-button small{font-size:8px}
  .ecosystem-section,.product-explorer,.comparison-section{padding:100px 0}
  .ecosystem-shell{border-radius:26px}
  .ecosystem-detail h3{font-size:25px}
  .explorer-canvas{min-height:420px;border-radius:25px}.explorer-screen{min-height:390px;border-radius:18px}
  .explorer-panel{border-radius:25px;padding:28px}.explorer-panel h3{font-size:29px}
  .hotspot{width:30px;height:30px}
  .comparison-table{overflow-x:auto;border-radius:24px}
  .comparison-row{min-width:830px}
  .comparison-row>div{padding:18px 14px}
  .product-subnav{top:48px;height:54px}.product-subnav-inner{height:54px;gap:12px}
  .product-subnav-name small,.product-subnav-cta{display:none}
  .product-subnav-links{gap:18px}.product-subnav-links a:after{bottom:-16px}
  .mobile-sticky-cta{
    position:fixed;z-index:2100;right:12px;left:12px;bottom:10px;height:54px;border-radius:17px;
    display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#fff;
    background:rgba(18,18,22,.9);backdrop-filter:blur(20px);box-shadow:0 14px 40px rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.14)
  }
  .mobile-sticky-cta span{font-weight:800}.mobile-sticky-cta small{font-size:9px;color:#c8c8ce}
}
@media(prefers-reduced-motion:reduce){
  .hero-auto-progress{display:none}
  .hotspot{animation:none}
}


/* =========================================================
   iPad landscape image frames — v8
   Every major product screenshot uses a responsive 4:3 iPad
   frame. Images are contained without stretching or cropping.
   ========================================================= */
:root{
  --ipad-ratio:4 / 3;
  --ipad-frame:#111214;
  --ipad-screen:#f5f5f7;
  --ipad-bezel:clamp(8px,1vw,13px);
  --ipad-radius:clamp(22px,2.6vw,38px);
  --ipad-screen-radius:calc(var(--ipad-radius) - 9px);
  --ipad-shadow:0 40px 110px rgba(0,0,0,.24),0 2px 2px rgba(255,255,255,.12) inset;
}

/* Shared screen behavior */
.hero-window,
.tile-image,
.story-device,
.master-frame,
.product-hero-frame,
.feature-image,
.explorer-screen{
  box-sizing:border-box;
  aspect-ratio:var(--ipad-ratio);
  height:auto;
  background:linear-gradient(145deg,#25262a,var(--ipad-frame));
  border-radius:var(--ipad-radius);
  padding:var(--ipad-bezel);
  overflow:hidden;
  box-shadow:var(--ipad-shadow);
  border:1px solid rgba(255,255,255,.13);
}

/* Every screenshot stays complete and undistorted. */
.hero-window img,
.tile-image img,
.story-image-wrap img,
.master-frame img,
.product-hero-frame img,
.feature-image img,
.explorer-screen img,
.flow-panel img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  background:var(--ipad-screen);
  border-radius:var(--ipad-screen-radius);
}

/* Remove desktop-browser chrome from the hero frames. */
.hero-window .window-bar{display:none}

/* A subtle front-camera indicator. */
.hero-window:after,
.tile-image:after,
.master-frame:after,
.product-hero-frame:after,
.feature-image:after,
.explorer-screen:after{
  content:"";
  position:absolute;
  z-index:8;
  top:calc(var(--ipad-bezel) * .38);
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#34363a;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}

/* Hero: two landscape iPads instead of desktop windows. */
.hero-stage{
  height:clamp(470px,48vw,650px);
}
.hero-window{position:absolute}
.hero-window.sec{
  width:min(70%,760px);
  height:auto;
  right:4%;
  top:0;
}
.hero-window.master{
  width:min(53%,590px);
  height:auto;
  left:3%;
  bottom:0;
}

/* Product cards use an iPad-sized preview. */
.product-tile{
  min-height:760px;
}
.tile-image{
  width:min(88%,680px);
  height:auto;
  max-height:none;
  bottom:24px;
}
.tile-image img{display:block}

/* Sticky SEC story. */
.story-visual{
  height:72vh;
  min-height:560px;
}
.story-device{
  position:relative;
  width:min(100%,calc((72vh - 24px) * 4 / 3));
  max-height:none;
}
.story-device:before{
  width:5px;
  height:5px;
  top:calc(var(--ipad-bezel) * .38);
  background:#34363a;
}
.story-image-wrap{
  height:100%;
  border-radius:var(--ipad-screen-radius);
  background:var(--ipad-screen);
}
.story-image-wrap img{
  border-radius:0;
}

/* Full MasterSheet and product hero iPads. */
.master-frame{
  position:relative;
  width:min(1080px,92vw);
  height:auto;
  margin:70px auto 70px;
  border-radius:var(--ipad-radius);
  padding:var(--ipad-bezel);
}
.master-frame:before{
  width:5px;
  height:5px;
  top:calc(var(--ipad-bezel) * .38);
  background:#34363a;
}
.master-frame img{border-radius:var(--ipad-screen-radius)}

.product-hero-frame{
  position:relative;
  width:min(1040px,92vw);
  height:auto;
  margin:70px auto 0;
}
.product-hero.light .product-hero-frame{
  background:linear-gradient(145deg,#2b2c30,#121315);
}

/* Feature screenshots. */
.feature-image{
  position:relative;
  width:100%;
  height:auto;
}
.feature-image img{
  display:block;
}

/* Integration screenshots: retain text card, but make image area 4:3. */
.flow-panel{
  padding:12px;
}
.flow-panel img{
  aspect-ratio:var(--ipad-ratio);
  height:auto;
  padding:8px;
  background:linear-gradient(145deg,#25262a,#111214);
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  object-fit:contain;
  box-sizing:border-box;
}

/* Interactive hotspot explorer. */
.explorer-shell{
  align-items:stretch;
}
.explorer-canvas{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.explorer-screen{
  position:relative;
  min-height:0;
  width:100%;
  flex:0 0 auto;
}
.explorer-screen img{
  position:relative;
}
.hotspot-layer{
  inset:var(--ipad-bezel);
  border-radius:var(--ipad-screen-radius);
  overflow:hidden;
}
.explorer-panel{
  min-height:0;
  height:100%;
}

/* Keep zoom inside the iPad screen. */
.explorer-canvas.zoomed .explorer-screen img{
  transform:scale(1.42);
}

/* Responsive iPad proportions. */
@media(max-width:1050px){
  .hero-stage{height:clamp(430px,62vw,610px)}
  .story-visual{
    height:auto;
    min-height:0;
  }
  .story-device{
    width:min(100%,860px);
    margin-inline:auto;
  }
}

@media(max-width:720px){
  :root{
    --ipad-bezel:7px;
    --ipad-radius:22px;
    --ipad-screen-radius:15px;
  }
  .hero-stage{
    height:430px;
    margin-top:42px;
  }
  .hero-window.sec{
    width:94%;
    right:0;
    top:0;
  }
  .hero-window.master{
    width:76%;
    left:0;
    bottom:0;
  }
  .product-tile{
    min-height:650px;
  }
  .tile-image{
    width:92%;
    bottom:18px;
  }
  .story-visual{
    height:auto;
    min-height:0;
  }
  .story-device,
  .master-frame,
  .product-hero-frame,
  .feature-image,
  .explorer-screen{
    width:100%;
    aspect-ratio:var(--ipad-ratio);
    min-height:0;
  }
  .master-frame{
    margin:50px auto 55px;
  }
  .product-hero-frame{
    margin-top:46px;
  }
  .explorer-canvas{
    min-height:0;
    padding:9px;
  }
  .explorer-screen{
    min-height:0;
  }
  .explorer-toolbar{
    left:20px;
    bottom:20px;
  }
}

/* Fullscreen explorer keeps the same iPad shape centered. */
.explorer-canvas:fullscreen{
  display:grid;
  place-items:center;
  padding:clamp(14px,3vw,36px);
  background:#050506;
}
.explorer-canvas:fullscreen .explorer-screen{
  width:min(94vw,calc(92vh * 4 / 3));
  max-height:92vh;
}


/* =========================================================
   MacBook Pro-style mockups — v9
   Replaces iPad-style frames with premium laptop mockups.
   Ratio uses a 16:10 laptop display, with a slim top camera
   area and a lower aluminum base to suggest a MacBook Pro.
   ========================================================= */
:root{
  --macbook-ratio:16 / 10;
  --macbook-shell-1:#3e4148;
  --macbook-shell-2:#141518;
  --macbook-bezel:#0b0c0f;
  --macbook-screen:#f5f5f7;
  --macbook-radius:clamp(16px,2vw,24px);
  --macbook-screen-radius:clamp(9px,1vw,14px);
  --macbook-padding:clamp(8px,0.8vw,12px);
  --macbook-shadow:
    0 34px 90px rgba(0,0,0,.24),
    0 10px 24px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.08) inset;
  --macbook-base-shadow:
    0 18px 26px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.42) inset;
}

.hero-window,
.tile-image,
.story-device,
.master-frame,
.product-hero-frame,
.feature-image,
.explorer-screen{
  position:relative;
  box-sizing:border-box;
  aspect-ratio:var(--macbook-ratio);
  height:auto;
  padding:var(--macbook-padding);
  border-radius:var(--macbook-radius);
  background:linear-gradient(180deg,var(--macbook-shell-1),var(--macbook-shell-2));
  border:1px solid rgba(255,255,255,.10);
  overflow:visible;
  box-shadow:var(--macbook-shadow);
}

/* Inner screen */
.hero-window img,
.tile-image img,
.story-image-wrap img,
.master-frame img,
.product-hero-frame img,
.feature-image img,
.explorer-screen img,
.flow-panel img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  background:var(--macbook-screen);
  border-radius:var(--macbook-screen-radius);
}

/* Hide the old iPad camera marker / browser bar */
.hero-window .window-bar{display:none !important}
.hero-window:before,
.hero-window:after,
.tile-image:before,
.tile-image:after,
.story-device:before,
.story-device:after,
.master-frame:before,
.master-frame:after,
.product-hero-frame:before,
.product-hero-frame:after,
.feature-image:before,
.feature-image:after,
.explorer-screen:before,
.explorer-screen:after{
  position:absolute;
  content:"";
  pointer-events:none;
}

/* Camera area / slim notch */
.hero-window:before,
.tile-image:before,
.story-device:before,
.master-frame:before,
.product-hero-frame:before,
.feature-image:before,
.explorer-screen:before{
  z-index:6;
  top:calc(var(--macbook-padding) * .42);
  left:50%;
  transform:translateX(-50%);
  width:clamp(44px,5vw,74px);
  height:clamp(7px,.8vw,10px);
  border-radius:0 0 8px 8px;
  background:#050608;
  box-shadow:0 0 0 1px rgba(255,255,255,.03);
}

/* Lower laptop base */
.hero-window:after,
.tile-image:after,
.story-device:after,
.master-frame:after,
.product-hero-frame:after,
.feature-image:after,
.explorer-screen:after{
  z-index:4;
  left:-4.5%;
  right:-4.5%;
  bottom:calc(clamp(10px,1.4vw,16px) * -1);
  height:clamp(12px,1.7vw,20px);
  border-radius:0 0 22px 22px / 0 0 10px 10px;
  background:
    linear-gradient(180deg,#d9dbe0 0%,#c2c6cc 45%,#a1a6ae 100%);
  box-shadow:var(--macbook-base-shadow);
}

/* Trackpad / center detail on the base */
.hero-window{
  overflow:visible;
}
.hero-window.sec::marker{content:""} /* harmless reset */

/* fine line above the base, like a hinge edge */
.hero-window,
.tile-image,
.story-device,
.master-frame,
.product-hero-frame,
.feature-image,
.explorer-screen{
  box-shadow:
    var(--macbook-shadow),
    0 calc(clamp(10px,1.4vw,16px) * -1) 0 rgba(0,0,0,.22) inset;
}

/* Extra alignment for wrappers that contain absolutely-positioned images */
.story-image-wrap{
  height:100%;
  border-radius:var(--macbook-screen-radius);
  overflow:hidden;
  background:var(--macbook-screen);
}
.hotspot-layer{
  inset:var(--macbook-padding);
  border-radius:var(--macbook-screen-radius);
  overflow:hidden;
}
.explorer-screen img{
  position:relative;
}

/* Hero layout with laptop proportions */
.hero-stage{
  height:clamp(500px,50vw,690px);
}
.hero-window.sec{
  width:min(74%,860px);
  right:2%;
  top:0;
}
.hero-window.master{
  width:min(58%,640px);
  left:0;
  bottom:2%;
}

/* Product tiles */
.product-tile{
  min-height:740px;
}
.tile-image{
  width:min(90%,760px);
  bottom:28px;
}

/* SEC story sticky visual */
.story-visual{
  height:74vh;
  min-height:580px;
}
.story-device{
  width:min(100%,calc((74vh - 22px) * 16 / 10));
}

/* Large hero/product frames */
.master-frame{
  width:min(1180px,94vw);
  margin:74px auto 78px;
}
.product-hero-frame{
  width:min(1100px,94vw);
  margin:76px auto 0;
}

/* Feature screenshots */
.feature-image{
  width:100%;
}

/* Integration cards */
.flow-panel{
  overflow:visible;
}
.flow-panel img{
  aspect-ratio:var(--macbook-ratio);
  padding:10px;
  background:linear-gradient(180deg,var(--macbook-shell-1),var(--macbook-shell-2));
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  object-fit:contain;
  box-sizing:border-box;
  box-shadow:0 22px 50px rgba(0,0,0,.18);
}

/* Hotspot explorer */
.explorer-canvas{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.explorer-screen{
  width:100%;
  min-height:0;
  flex:0 0 auto;
}
.explorer-canvas.zoomed .explorer-screen img{
  transform:scale(1.36);
}

/* Fullscreen explorer preserves laptop ratio */
.explorer-canvas:fullscreen{
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,40px);
  background:#050506;
}
.explorer-canvas:fullscreen .explorer-screen{
  width:min(96vw,calc(90vh * 16 / 10));
  max-height:90vh;
}

/* Tablet / mobile */
@media(max-width:1050px){
  .hero-stage{height:clamp(450px,64vw,620px)}
  .story-visual{height:auto;min-height:0}
  .story-device{width:min(100%,920px);margin-inline:auto}
}
@media(max-width:720px){
  :root{
    --macbook-padding:7px;
    --macbook-radius:16px;
    --macbook-screen-radius:10px;
  }
  .hero-stage{
    height:420px;
    margin-top:42px;
  }
  .hero-window.sec{
    width:96%;
    right:0;
    top:0;
  }
  .hero-window.master{
    width:80%;
    left:0;
    bottom:0;
  }
  .product-tile{min-height:620px}
  .tile-image{width:94%;bottom:20px}
  .story-visual{height:auto;min-height:0}
  .story-device,
  .master-frame,
  .product-hero-frame,
  .feature-image,
  .explorer-screen{
    width:100%;
    aspect-ratio:var(--macbook-ratio);
    min-height:0;
  }
  .master-frame{margin:52px auto 58px}
  .product-hero-frame{margin-top:50px}
  .explorer-canvas{padding:10px}
  .explorer-screen{min-height:0}
  .explorer-toolbar{left:20px;bottom:20px}
  .hero-window:after,
  .tile-image:after,
  .story-device:after,
  .master-frame:after,
  .product-hero-frame:after,
  .feature-image:after,
  .explorer-screen:after{
    left:-3%;
    right:-3%;
  }
}


/* =========================================================
   v10 — ensure MacBook mockup is applied to ALL screenshots
   ========================================================= */

/* Shared utility class for all screenshot surfaces */
.macbook-mockup{
  position:relative;
  box-sizing:border-box;
  aspect-ratio:var(--macbook-ratio,16 / 10);
  padding:var(--macbook-padding,10px);
  border-radius:var(--macbook-radius,22px);
  background:linear-gradient(180deg,var(--macbook-shell-1,#3e4148),var(--macbook-shell-2,#141518));
  border:1px solid rgba(255,255,255,.10);
  overflow:visible;
  box-shadow:var(--macbook-shadow,0 34px 90px rgba(0,0,0,.24));
}

.macbook-mockup::before,
.macbook-mockup::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

/* Camera/notch area */
.macbook-mockup::before{
  z-index:6;
  top:calc(var(--macbook-padding,10px) * .42);
  left:50%;
  transform:translateX(-50%);
  width:clamp(44px,5vw,74px);
  height:clamp(7px,.8vw,10px);
  border-radius:0 0 8px 8px;
  background:#050608;
  box-shadow:0 0 0 1px rgba(255,255,255,.03);
}

/* Lower aluminum base */
.macbook-mockup::after{
  z-index:4;
  left:-4.5%;
  right:-4.5%;
  bottom:calc(clamp(10px,1.4vw,16px) * -1);
  height:clamp(12px,1.7vw,20px);
  border-radius:0 0 22px 22px / 0 0 10px 10px;
  background:linear-gradient(180deg,#d9dbe0 0%,#c2c6cc 45%,#a1a6ae 100%);
  box-shadow:0 18px 26px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.42) inset;
}

/* Force inner image treatment */
.macbook-mockup > img,
.macbook-mockup .story-image-wrap > img,
.flow-screen > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:var(--macbook-screen,#f5f5f7);
  border-radius:var(--macbook-screen-radius,12px);
}

/* Story uses nested image-wrap, so make the wrap the visible screen */
.story-device.macbook-mockup{
  padding:var(--macbook-padding,10px);
}
.story-device.macbook-mockup .story-image-wrap{
  height:100%;
  border-radius:var(--macbook-screen-radius,12px);
  overflow:hidden;
  background:var(--macbook-screen,#f5f5f7);
}

/* Integration cards now get a true MacBook screen, not just a styled image */
.flow-panel{
  overflow:visible;
}
.flow-screen{
  width:100%;
  margin-bottom:18px;
}
.flow-screen > img{
  aspect-ratio:var(--macbook-ratio,16 / 10);
}

/* Explorer and product screenshots keep the frame even after switching/zooming */
.explorer-screen.macbook-mockup img,
.product-hero-frame.macbook-mockup img,
.feature-image.macbook-mockup img,
.tile-image.macbook-mockup img,
.master-frame.macbook-mockup img,
.hero-window.macbook-mockup img{
  border-radius:var(--macbook-screen-radius,12px);
}

/* Make sure older pseudo-elements from previous frame systems do not conflict */
.macbook-mockup .window-bar{display:none !important}

@media(max-width:720px){
  .macbook-mockup::after{
    left:-3%;
    right:-3%;
  }
  .flow-screen{
    margin-bottom:14px;
  }
}


/* =========================================================
   Premium attraction layer — v11
   ========================================================= */
:root{
  --premium-blue:#0071e3;
  --premium-purple:#7c4dff;
  --premium-cyan:#5ac8fa;
  --premium-green:#34c759;
  --premium-ease:cubic-bezier(.22,1,.36,1);
}

/* More dimensional page atmosphere */
body{
  background:
    radial-gradient(circle at 10% 12%,rgba(0,113,227,.035),transparent 25%),
    radial-gradient(circle at 90% 36%,rgba(124,77,255,.035),transparent 28%),
    #fff;
}
.dark-section,.final-cta{
  --spot-x:50%;
  --spot-y:40%;
  isolation:isolate;
}
.dark-section::before,.final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(560px circle at var(--spot-x) var(--spot-y),rgba(92,140,255,.16),transparent 52%),
    radial-gradient(420px circle at calc(var(--spot-x) + 15%) calc(var(--spot-y) + 18%),rgba(140,82,255,.10),transparent 58%);
  opacity:.85;
  transition:opacity .35s ease;
}
.dark-section>.container,.final-cta>.container{position:relative;z-index:1}

/* Headings gain a clean cinematic clipping reveal */
.js .headline.reveal,.js .display.reveal{
  clip-path:inset(0 0 22% 0 round 8px);
  transition:
    opacity 760ms var(--ease-soft),
    transform 1050ms var(--ease-apple),
    filter 760ms var(--ease-soft),
    clip-path 1150ms var(--premium-ease);
}
.js .headline.reveal.visible,.js .display.reveal.visible{
  clip-path:inset(0 0 0 0 round 0);
}

/* MacBook mockup premium tilt and moving shine */
.macbook-mockup{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --lift:0px;
  --shine-x:50%;
  --shine-y:20%;
  transform:
    perspective(1500px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(0,var(--lift),0);
  transform-style:preserve-3d;
  transition:
    transform 720ms var(--premium-ease),
    box-shadow 720ms var(--ease-soft);
  will-change:transform;
}
.macbook-mockup:hover{
  --lift:-6px;
  box-shadow:
    0 48px 120px rgba(0,0,0,.28),
    0 14px 38px rgba(0,0,0,.16);
}
.macbook-mockup > img,
.macbook-mockup .story-image-wrap{
  position:relative;
  z-index:1;
}
.macbook-mockup .mockup-shine{
  position:absolute;
  z-index:7;
  inset:var(--macbook-padding,10px);
  border-radius:var(--macbook-screen-radius,12px);
  pointer-events:none;
  background:
    radial-gradient(360px circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.26),transparent 48%);
  mix-blend-mode:screen;
  opacity:.42;
  transition:opacity .3s ease;
}
.macbook-mockup:hover .mockup-shine{opacity:.72}

/* Magnetic feedback */
.primary-pill,.nav-button,.product-subnav-cta,.hero-selector-button,.explorer-tab{
  will-change:transform;
}

/* Floating section rail */
.section-rail{
  position:fixed;
  z-index:1700;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:13px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 12px 38px rgba(0,0,0,.09);
  opacity:0;
  translate:-10px 0;
  transition:opacity .45s ease,translate .65s var(--premium-ease);
}
.section-rail.show{opacity:1;translate:0 0}
.section-rail a{
  position:relative;
  width:8px;height:8px;border-radius:50%;
  background:#b7b7bc;
  transition:transform .45s var(--premium-ease),background .3s ease;
}
.section-rail a.active{background:var(--premium-blue);transform:scale(1.55)}
.section-rail a span{
  position:absolute;
  left:18px;top:50%;
  transform:translateY(-50%) translateX(-8px);
  white-space:nowrap;
  opacity:0;pointer-events:none;
  background:#1d1d1f;color:#fff;
  padding:6px 9px;border-radius:8px;
  font-size:10px;
  transition:opacity .25s ease,transform .35s var(--premium-ease);
}
.section-rail a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}

/* Why AMSS bento */
.why-section{
  position:relative;
  padding:150px 0;
  background:
    radial-gradient(circle at 12% 6%,rgba(0,113,227,.08),transparent 28%),
    radial-gradient(circle at 86% 90%,rgba(124,77,255,.09),transparent 32%),
    #f5f5f7;
  overflow:hidden;
}
.why-bento{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:20px;
}
.why-card{
  position:relative;
  min-height:360px;
  border-radius:36px;
  padding:38px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.055);
  box-shadow:0 24px 70px rgba(0,0,0,.075);
  transition:transform .8s var(--premium-ease),box-shadow .8s var(--ease-soft);
}
.why-card:hover{transform:translateY(-8px);box-shadow:0 36px 96px rgba(0,0,0,.12)}
.why-card h3{font-size:clamp(30px,3.5vw,52px);line-height:1.16;margin:5px 0 14px}
.why-card p:not(.eyebrow){color:#6e6e73;max-width:600px}
.why-card-hero{
  grid-row:span 2;
  min-height:740px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 20%,rgba(0,113,227,.34),transparent 34%),
    radial-gradient(circle at 78% 70%,rgba(124,77,255,.35),transparent 36%),
    linear-gradient(145deg,#07090f,#171927);
  border-color:rgba(255,255,255,.08);
}
.why-card-hero p:not(.eyebrow){color:#c8cad4}
.why-card-copy{position:relative;z-index:4}
.why-devices{
  position:absolute;
  inset:245px 22px 20px;
  direction:ltr;
}
.why-mac{
  position:absolute;
}
.why-mac-sec{width:82%;right:0;top:0;transform:perspective(1400px) rotateY(-8deg) rotateX(2deg)}
.why-mac-master{width:62%;left:0;bottom:10px;z-index:3;transform:perspective(1400px) rotateY(8deg) rotateX(-2deg)}
.why-connect-pill{
  position:absolute;
  z-index:8;
  left:48%;top:54%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);
  color:#111;
  padding:8px 13px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  box-shadow:0 12px 34px rgba(0,0,0,.25);
}
.why-card-audit{background:linear-gradient(145deg,#fff,#f8fbff)}
.audit-visual{display:grid;gap:10px;margin-top:28px}
.audit-line{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:15px;
  background:#f1f1f4;
  color:#8b8b91;
  transform:translateX(16px);
  opacity:.55;
}
.audit-line.active{background:#edf7ff;color:#111;transform:none;opacity:1}
.audit-line i{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:#fff;color:var(--premium-blue);
  font-style:normal;font-weight:900;font-size:10px
}
.audit-line b{font-size:11px}.audit-line small{font-size:9px}
.why-card-scale{
  min-height:430px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 18%,rgba(90,200,250,.42),transparent 30%),
    linear-gradient(145deg,#17264e,#5b36d5 60%,#9a55e7);
}
.why-card-scale p:not(.eyebrow){color:#e2e5f2}
.program-orbit{
  position:absolute;
  left:0;right:0;bottom:-72px;
  height:250px;
}
.orbit-core,.orbit-chip{
  position:absolute;display:grid;place-items:center;
  border-radius:50%;font-weight:900;
  box-shadow:0 18px 50px rgba(0,0,0,.2)
}
.orbit-core{
  width:110px;height:110px;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:#fff;color:#3a2a8d;font-size:20px
}
.orbit-chip{width:58px;height:58px;background:rgba(255,255,255,.9);color:#332779;font-size:9px}
.chip-sec{left:15%;top:28%}.chip-ms{right:16%;top:22%}.chip-au{left:30%;bottom:10%}.chip-an{right:28%;bottom:4%}
.why-card-arabic{
  min-height:300px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:22px;
  align-items:center;
}
.arabic-sample{
  min-height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  padding:20px;
  border-radius:25px;
  background:
    radial-gradient(circle at 25% 25%,rgba(0,113,227,.16),transparent 38%),
    #f5f5f7;
}
.arabic-sample span{
  padding:9px 13px;border-radius:999px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  font-size:13px;font-weight:800;
  animation:arabicFloat 4s ease-in-out infinite;
}
.arabic-sample span:nth-child(2){animation-delay:-1.4s}
.arabic-sample span:nth-child(3){animation-delay:-2.7s}
@keyframes arabicFloat{50%{transform:translateY(-8px)}}

/* Moving value strip */
.experience-strip{
  overflow:hidden;
  padding:22px 0;
  background:#1d1d1f;
  color:#fff;
  border-block:1px solid rgba(255,255,255,.08);
}
.experience-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  animation:valueTicker 34s linear infinite;
}
.experience-track span{font-size:15px;font-weight:800;white-space:nowrap}
.experience-track i{color:#6ea8ff;font-style:normal}
@keyframes valueTicker{to{transform:translateX(50%)}}

/* Animated final CTA glow */
.final-cta{
  background:
    radial-gradient(circle at 20% 30%,rgba(0,113,227,.22),transparent 35%),
    radial-gradient(circle at 80% 65%,rgba(124,77,255,.20),transparent 38%),
    #050507;
}
.final-cta::after{
  content:"";
  position:absolute;
  inset:12% 8%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 0 0 90px rgba(255,255,255,.015),
    0 0 0 180px rgba(255,255,255,.01);
  pointer-events:none;
}

/* Navbar active underline */
.nav-links a{
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute;
  right:0;left:0;bottom:-9px;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transition:transform .45s var(--premium-ease);
}
.nav-links a.active::after{transform:scaleX(1)}

@media(max-width:1050px){
  .why-bento{grid-template-columns:1fr}
  .why-card-hero{grid-row:auto}
  .why-card-arabic{grid-template-columns:1fr}
  .section-rail{display:none}
}
@media(max-width:720px){
  .why-section{padding:100px 0}
  .why-card{border-radius:27px;padding:26px;min-height:330px}
  .why-card-hero{min-height:640px}
  .why-devices{inset:260px 10px 14px}
  .why-mac-sec{width:96%}
  .why-mac-master{width:75%}
  .why-connect-pill{top:57%}
  .why-card h3{font-size:34px}
  .why-card-arabic{min-height:430px}
  .experience-strip{overflow-x:clip}.experience-track{animation-duration:28s}
}
@media(prefers-reduced-motion:reduce){
  .experience-track,.arabic-sample span{animation:none}
  .macbook-mockup{transform:none!important}
}


/* =========================================================
   UX refinement v12 — reading clarity and calmer transitions
   ========================================================= */
:root{
  --reading-width:720px;
  --section-space:clamp(104px,11vw,164px);
  --sticky-offset:124px;
  --ux-ease:cubic-bezier(.2,.8,.2,1);
}

/* Accessibility */
.skip-link{
  position:fixed;
  z-index:5000;
  top:10px;
  right:14px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:#111;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  transform:translateY(-150%);
  transition:transform .3s var(--ux-ease);
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{
  outline:3px solid rgba(0,113,227,.48);
  outline-offset:4px;
}
button,a{touch-action:manipulation}

/* Prevent sticky navigation from covering anchored sections */
section[id],article[id],div[id]{scroll-margin-top:var(--sticky-offset)}

/* Stronger reading hierarchy */
.section-intro,.story-intro,.account-copy,.feature-copy,.final-cta .container{
  max-width:var(--reading-width);
}
.section-intro,.story-intro{
  margin-inline:auto;
  text-align:center;
}
.section-intro .subhead,.story-intro .subhead,
.hero .subhead,.product-hero .subhead,.final-cta p{
  max-width:680px;
  margin-inline:auto;
}
html[dir="rtl"] .subhead{
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.95;
}
html[dir="rtl"] p{
  text-wrap:pretty;
}
html[dir="rtl"] .feature-copy p,
html[dir="rtl"] .story-chapter p,
html[dir="rtl"] .why-card p:not(.eyebrow),
html[dir="rtl"] .account-copy p{
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.95;
  max-width:58ch;
}
html[dir="rtl"] li{line-height:1.8}
.eyebrow{margin-bottom:12px}
.headline,.display{margin-bottom:22px}
.section-intro{margin-bottom:clamp(48px,6vw,76px)}

/* Consistent section breathing room */
.products,.ecosystem-section,.why-section,.product-explorer,
.master-section,.integration,.comparison-section,.account-section,
.governance,.feature-sequence{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
}

/* Gentle visual transitions between large sections */
.products,.why-section,.master-section,.comparison-section,.governance{
  position:relative;
}
.products::after,.why-section::after,.master-section::after,
.comparison-section::after,.governance::after{
  content:"";
  position:absolute;
  right:8%;
  left:8%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.09),transparent);
}

/* Clear hero summary */
.hero-clarity-strip{
  width:min(650px,100%);
  margin:18px auto 32px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:12px;
  color:#fff;
}
.hero-clarity-strip span{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
}
.hero-clarity-strip b{
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:#fff;color:#111;font-size:10px
}
.hero-clarity-strip small{font-size:11px;color:#e4e6ed}
.hero-clarity-strip i{font-style:normal;color:#7db6ff}

/* Less tiring repeated motion: smaller distance, no blur on paragraphs/cards */
.js .reveal{
  --reveal-y:32px;
  filter:blur(4px);
  transition:
    opacity 620ms var(--ease-soft),
    transform 820ms var(--ux-ease),
    filter 520ms var(--ease-soft);
}
.js .reveal.enter-from-bottom{--motion-y:32px}
.js .reveal.enter-from-top{--motion-y:-32px}
.js .reveal.exit-up{--motion-y:-24px}
.js .reveal.exit-down{--motion-y:24px}
.js p.reveal,.js .product-tile.reveal,.js .small-tile.reveal,
.js .governance-card.reveal,.js .why-card.reveal{
  filter:none;
}
.story-chapter{
  filter:none;
  transform:translate3d(20px,24px,0) scale(.992);
  transition:opacity 580ms ease,transform 760ms var(--ux-ease);
}
html[data-scroll-direction="up"] .story-chapter:not(.active){
  transform:translate3d(-20px,-24px,0) scale(.992);
}

/* Navigation hides softly while scrolling down, returns when scrolling up */
.global-nav{
  transition:
    transform 520ms var(--ux-ease),
    background 350ms ease,
    box-shadow 350ms ease;
}
.global-nav.nav-hidden{
  transform:translateY(calc(-100% - 8px));
}
.global-nav.nav-elevated{
  box-shadow:0 10px 34px rgba(0,0,0,.08);
}

/* Product subnav remains stable and readable */
.product-subnav{
  transition:transform 480ms var(--ux-ease),box-shadow 300ms ease;
}
.product-subnav.nav-elevated{
  box-shadow:0 10px 28px rgba(0,0,0,.07);
}

/* Clearer cards */
.product-tile,.why-card,.governance-card,.small-tile,
.account-card,.ecosystem-shell,.explorer-panel{
  border-color:rgba(0,0,0,.07);
}
.product-tile h3,.why-card h3,.governance-card h3{
  text-wrap:balance;
}
.tile-links,.link-row{
  gap:14px;
  flex-wrap:wrap;
}

/* Interaction hint */
.interaction-hint{
  max-width:650px;
  margin:-12px auto 28px;
  text-align:center;
  color:#6e6e73;
  font-size:12px;
}
.interaction-hint span{color:#0071e3;margin-left:6px}

/* Explorer clarity */
.explorer-panel h3{margin-bottom:16px}
.explorer-panel>p:not(.eyebrow){font-size:16px;line-height:1.9}
.explorer-controls button{
  transition:transform .32s var(--ux-ease),background .25s ease;
}
.explorer-controls button:hover{transform:scale(1.08)}
.explorer-controls button:active{transform:scale(.94)}

/* Comparison UX */
.comparison-scroll{
  position:relative;
  overflow:auto;
  border-radius:34px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
}
.comparison-scroll-hint{
  display:none;
  text-align:center;
  color:#6e6e73;
  font-size:11px;
  margin:0 0 12px;
}
.comparison-row:nth-child(even){background:#fcfcfd}
.comparison-row .amss-column{position:relative}
.comparison-row .amss-column::before{
  content:"✓";
  position:absolute;
  top:10px;
  left:10px;
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  background:#dff3ff;color:#0071e3;
  font-size:10px;font-weight:900;
}
.comparison-head .amss-column::before{display:none}

/* Better buttons */
.primary-pill,.nav-button,.product-subnav-cta{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.text-link{
  display:inline-flex;
  align-items:center;
  min-height:42px;
}

/* Back to top */
.back-to-top{
  position:fixed;
  z-index:1900;
  left:24px;
  bottom:24px;
  width:44px;height:44px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#111;
  backdrop-filter:blur(18px);
  box-shadow:0 14px 38px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
  transition:opacity .35s ease,transform .45s var(--ux-ease);
}
.back-to-top.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Pause moving content when users interact */
.experience-strip:hover .experience-track,
.experience-strip:focus-within .experience-track{
  animation-play-state:paused;
}

@media(max-width:900px){
  :root{--sticky-offset:110px}
  .comparison-scroll-hint{display:block}
  .comparison-scroll{
    margin-inline:-8px;
    padding-inline:8px;
    border-radius:24px;
  }
  .comparison-row>div:first-child{
    position:sticky;
    right:0;
    z-index:3;
    background:#fff;
    box-shadow:-8px 0 16px rgba(0,0,0,.05);
  }
  .comparison-head>div:first-child{background:#1d1d1f}
  .comparison-row:nth-child(even)>div:first-child{background:#fcfcfd}
}

@media(max-width:720px){
  :root{
    --section-space:92px;
    --sticky-offset:108px;
  }
  html[dir="rtl"] .subhead{font-size:17px;line-height:1.9}
  html[dir="rtl"] .feature-copy p,
  html[dir="rtl"] .story-chapter p,
  html[dir="rtl"] .why-card p:not(.eyebrow){
    font-size:15px;
    line-height:1.9;
  }
  .hero-clarity-strip{
    grid-template-columns:1fr;
    gap:7px;
    width:min(330px,100%);
  }
  .hero-clarity-strip i{
    transform:rotate(-90deg);
    height:12px;
  }
  .hero-clarity-strip span{min-height:50px}
  .global-nav.nav-hidden{transform:none}
  .back-to-top{
    left:16px;
    bottom:78px;
    width:42px;height:42px;
  }
  .section-intro{margin-bottom:46px}
  .js .reveal{--reveal-y:24px}
  .js .reveal.enter-from-bottom{--motion-y:24px}
  .js .reveal.enter-from-top{--motion-y:-24px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .global-nav,.product-subnav{transition:none}
}


/* =========================================================
   MasterSheet sticky story — v13
   Same interaction pattern as SEC, with a distinct visual tone.
   ========================================================= */
.master-story{
  background:
    radial-gradient(circle at 15% 15%,rgba(52,199,89,.12),transparent 30%),
    radial-gradient(circle at 85% 72%,rgba(0,113,227,.16),transparent 34%),
    #05070a;
}
.master-story .story-intro .eyebrow{
  color:#78d693;
}
.master-story .story-chapter li::before{
  color:#78d693;
}
.master-story .story-chapter.active .number{
  color:#78d693;
}
.master-story .story-device{
  box-shadow:
    0 55px 130px rgba(0,0,0,.62),
    0 0 70px rgba(52,199,89,.08),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.master-story .story-caption{
  background:rgba(5,20,13,.72);
  border-color:rgba(120,214,147,.20);
}
.master-story .story-caption small{
  color:#b7c8bd;
}


/* =========================================================
   Global image viewer + story theater — v14
   ========================================================= */
body.viewer-open{
  overflow:hidden;
  overscroll-behavior:none;
}

/* Every product screenshot communicates that it can be enlarged. */
img[data-zoomable]{
  cursor:zoom-in;
  user-select:none;
  -webkit-user-drag:none;
}
.macbook-mockup:not(.viewer-device){
  cursor:zoom-in;
}
.image-zoom-trigger{
  position:absolute;
  z-index:20;
  top:calc(var(--macbook-padding,10px) + 12px);
  right:calc(var(--macbook-padding,10px) + 12px);
  min-width:42px;
  height:34px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(12,13,17,.72);
  color:#fff;
  backdrop-filter:blur(16px) saturate(150%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:0;
  transform:translateY(-8px) scale(.94);
  transition:
    opacity .28s ease,
    transform .48s var(--ux-ease),
    background .25s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.image-zoom-trigger span{
  font-size:19px;
  line-height:1;
}
.image-zoom-trigger small{
  font-family:"Tajawal","SF Arabic",Tahoma,Arial,sans-serif;
  font-size:9px;
  font-weight:800;
}
.macbook-mockup:hover > .image-zoom-trigger,
.image-zoom-trigger:focus-visible{
  opacity:1;
  transform:none;
}
.image-zoom-trigger:hover{
  background:rgba(0,113,227,.92);
}

/* Viewer overlay */
.image-viewer{
  position:fixed;
  z-index:10000;
  inset:0;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .38s ease,visibility 0s linear .38s;
}
.image-viewer.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .38s ease;
}
.image-viewer-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 10%,rgba(0,113,227,.18),transparent 34%),
    radial-gradient(circle at 85% 80%,rgba(124,77,255,.16),transparent 34%),
    rgba(2,3,6,.92);
  backdrop-filter:blur(26px) saturate(125%);
}
.image-viewer-dialog{
  position:absolute;
  inset:clamp(12px,2vw,28px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:clamp(24px,3vw,42px);
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(24,26,34,.97),rgba(7,8,12,.98));
  box-shadow:0 40px 140px rgba(0,0,0,.62);
  transform:translateY(24px) scale(.975);
  opacity:0;
  transition:
    transform .62s var(--premium-ease),
    opacity .42s ease;
}
.image-viewer.open .image-viewer-dialog{
  transform:none;
  opacity:1;
}
.image-viewer-close{
  position:absolute;
  z-index:50;
  top:18px;
  left:18px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:27px;
  line-height:1;
  backdrop-filter:blur(14px);
  transition:transform .35s var(--ux-ease),background .25s ease;
}
.image-viewer-close:hover{
  transform:rotate(90deg) scale(1.06);
  background:rgba(255,255,255,.17);
}
.image-viewer-stage{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(310px,.62fr);
  direction:ltr;
}
.image-viewer-media,
.image-viewer-info{
  direction:rtl;
}
.image-viewer-media{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(42px,5vw,76px);
  overflow:hidden;
}
.image-viewer-media::before{
  content:"";
  position:absolute;
  width:min(80vw,980px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(72,120,255,.16),transparent 62%);
  filter:blur(18px);
  pointer-events:none;
}
.viewer-device{
  position:relative;
  z-index:2;
  width:min(100%,1180px);
  max-height:74vh;
  margin:0;
  cursor:default;
  transition:
    transform .78s var(--premium-ease),
    opacity .4s ease;
}
.viewer-device::after{
  left:-3.2%;
  right:-3.2%;
}
.viewer-device > img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#f5f5f7;
  transition:
    opacity .34s ease,
    transform .68s var(--premium-ease),
    filter .34s ease;
}
.viewer-device > img.is-changing{
  opacity:0;
  filter:blur(8px);
  transform:scale(.97);
}
.viewer-device.swap-down > img.is-changing{
  transform:translateY(18px) scale(.97);
}
.viewer-device.swap-up > img.is-changing{
  transform:translateY(-18px) scale(.97);
}
.viewer-loading{
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  margin:-17px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  animation:viewerSpin .8s linear infinite;
}
.viewer-loading.show{opacity:1}
@keyframes viewerSpin{to{transform:rotate(360deg)}}

.viewer-gesture-hint{
  position:relative;
  z-index:3;
  margin:36px 0 0;
  color:#aeb2bf;
  font-size:11px;
  text-align:center;
}
.image-viewer.simple-mode .viewer-gesture-hint{
  display:none;
}

/* Story information remains visible while the image changes. */
.image-viewer-info{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(42px,4vw,72px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-right:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.viewer-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.viewer-kicker{
  color:#79b8ff;
  font-size:11px;
  font-weight:900;
}
.viewer-counter{
  color:#9297a6;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.viewer-copy{
  transition:
    opacity .30s ease,
    transform .48s var(--premium-ease),
    filter .30s ease;
}
.viewer-copy.leave-down{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
}
.viewer-copy.leave-up{
  opacity:0;
  transform:translateY(-28px);
  filter:blur(6px);
}
.viewer-copy.enter-from-up{
  opacity:0;
  transform:translateY(-28px);
  filter:blur(6px);
}
.viewer-copy.enter-from-down{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
}
.viewer-copy h2{
  margin:0 0 17px;
  color:#fff;
  font-family:"Tajawal","SF Arabic",Tahoma,Arial,sans-serif;
  font-size:clamp(29px,3.4vw,52px);
  line-height:1.2;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.viewer-copy p{
  margin:0;
  color:#bcc0cc;
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.95;
}
.viewer-copy ul{
  display:grid;
  gap:10px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.viewer-copy li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#eef0f5;
  font-size:13px;
  line-height:1.75;
}
.viewer-copy li::before{
  content:"✓";
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(52,199,89,.15);
  color:#68d783;
  font-size:10px;
  font-weight:900;
}
.viewer-progress{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:34px;
}
.viewer-progress button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#555a68;
  transition:
    width .42s var(--premium-ease),
    background .25s ease,
    transform .35s var(--premium-ease);
}
.viewer-progress button.active{
  width:32px;
  background:#fff;
}
.viewer-progress button:hover{
  transform:scale(1.18);
}
.viewer-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:24px;
}
.viewer-controls button{
  min-height:48px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.075);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  font-family:"Tajawal","SF Arabic",Tahoma,Arial,sans-serif;
  transition:
    transform .35s var(--ux-ease),
    background .25s ease,
    opacity .25s ease;
}
.viewer-controls button:hover:not(:disabled){
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
}
.viewer-controls button:disabled{
  opacity:.3;
  cursor:not-allowed;
}
.viewer-controls button span{
  font-size:11px;
  font-weight:800;
}
.viewer-controls button b{
  font-size:18px;
}
.viewer-simple-caption{
  margin:24px 0 0;
  color:#8d92a1;
  font-size:11px;
  line-height:1.8;
}

/* Simple images use a wider viewing area and a compact caption panel. */
.image-viewer.simple-mode .image-viewer-stage{
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
}
.image-viewer.simple-mode .viewer-progress,
.image-viewer.simple-mode .viewer-controls,
.image-viewer.simple-mode .viewer-copy ul{
  display:none;
}
.image-viewer.simple-mode .viewer-copy p{
  color:#9297a6;
}

/* MasterSheet theater accent */
.image-viewer.story-mode:has(.viewer-kicker) .viewer-device{
  --viewer-accent:#79b8ff;
}

/* Responsive fullscreen viewer */
@media(max-width:980px){
  .image-viewer-dialog{
    inset:8px;
    border-radius:24px;
  }
  .image-viewer-stage,
  .image-viewer.simple-mode .image-viewer-stage{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,58%) minmax(0,42%);
  }
  .image-viewer-media{
    padding:54px 26px 28px;
  }
  .viewer-device{
    width:min(92vw,880px);
    max-height:48vh;
  }
  .image-viewer-info{
    justify-content:flex-start;
    padding:28px 28px 34px;
    border-right:0;
    border-top:1px solid rgba(255,255,255,.10);
    overflow-y:auto;
  }
  .viewer-gesture-hint{
    margin-top:25px;
  }
  .viewer-copy h2{
    font-size:clamp(26px,6vw,40px);
  }
  .viewer-copy ul{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:20px;
  }
  .viewer-copy li{
    padding:9px;
    border-radius:12px;
    background:rgba(255,255,255,.055);
    font-size:11px;
  }
}
@media(max-width:620px){
  .image-viewer-stage,
  .image-viewer.simple-mode .image-viewer-stage{
    grid-template-rows:minmax(0,48%) minmax(0,52%);
  }
  .image-viewer-close{
    top:12px;
    left:12px;
    width:40px;
    height:40px;
  }
  .image-viewer-media{
    padding:50px 14px 20px;
  }
  .viewer-device{
    width:94vw;
    max-height:38vh;
  }
  .viewer-device::after{
    left:-2%;
    right:-2%;
  }
  .viewer-gesture-hint{
    margin-top:18px;
    font-size:9px;
  }
  .image-viewer-info{
    padding:22px 20px 28px;
  }
  .viewer-meta{
    margin-bottom:12px;
  }
  .viewer-copy h2{
    margin-bottom:10px;
    font-size:26px;
  }
  .viewer-copy p{
    font-size:13px;
    line-height:1.85;
  }
  .viewer-copy ul{
    grid-template-columns:1fr;
    gap:5px;
    margin-top:15px;
  }
  .viewer-copy li{
    padding:6px 8px;
  }
  .viewer-progress{
    margin-top:18px;
  }
  .viewer-controls{
    margin-top:15px;
  }
  .viewer-controls button{
    min-height:44px;
  }
  .image-zoom-trigger{
    opacity:1;
    transform:none;
    top:calc(var(--macbook-padding,7px) + 7px);
    right:calc(var(--macbook-padding,7px) + 7px);
    min-width:36px;
    height:30px;
    padding-inline:8px;
  }
  .image-zoom-trigger small{
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .image-viewer,
  .image-viewer-dialog,
  .viewer-copy,
  .viewer-device > img,
  .image-zoom-trigger{
    transition:none!important;
  }
  .viewer-loading{
    animation:none;
  }
}

/* ByteExpert up-link (return to company home from product pages) */
.nav-links a.co-uplink{display:inline-flex;align-items:center;gap:5px;font-weight:800;
  padding:5px 12px;border-radius:999px;border:1px solid rgba(31,111,235,.4);color:#1f6feb;white-space:nowrap}
.global-nav.dark .nav-links a.co-uplink{color:#9cc0ff;border-color:rgba(140,180,255,.42)}
.nav-links a.co-uplink:hover{background:rgba(31,111,235,.12);color:#1f6feb}
.global-nav.dark .nav-links a.co-uplink:hover{background:rgba(140,180,255,.14);color:#fff}
.nav-links a.co-uplink:focus-visible{outline:2px solid #1f6feb;outline-offset:2px}