/* Direção visual: ecossistema educacional com profundidade, luz e superfícies editoriais. */
:root {
  --sp-ink: #0c1022;
  --sp-violet: #7c4dff;
  --sp-cyan: #65d9ff;
  --sp-gold: #ffbd69;
}

.site-header { z-index: 40; }
.desktop-nav { gap: clamp(12px, 1.45vw, 24px); }
.desktop-nav a { white-space: nowrap; }
.hero { isolation: isolate; overflow: hidden; }
.arcane-ring-hero { display: none; }
.reveal { transform: translate3d(0, 28px, 0) scale(.99); transition: opacity .78s cubic-bezier(.2,.75,.25,1), transform .78s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { transform: translate3d(0,0,0) scale(1); }
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 77% 50%, rgba(88, 59, 205, .27), transparent 38%),
              linear-gradient(110deg, rgba(6, 10, 27, .15), transparent 72%);
}
.hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 4vw, 64px); }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 690px; }
.hero-copy h1 { max-width: 650px; font-size: clamp(2.8rem, 4.2vw, 4.05rem); line-height: 1.04; letter-spacing: -.06em; }
.hero-copy h1 span { color: #c6aaff; text-shadow: 0 0 38px rgba(153, 109, 255, .28); }
.hero-lead { max-width: 640px; font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.72; }
.hero-actions { align-items: center; gap: 13px; }
.hero-actions .button:first-child { color: #100c24; background: linear-gradient(135deg, #c8afff, #8e68ff); box-shadow: 0 12px 32px rgba(115, 75, 240, .32); }
.hero-visual { perspective: 1500px; }
.hero-world { position: absolute; z-index: 0; inset: 0; overflow: hidden; isolation: isolate; perspective: 1200px; transform-style: preserve-3d; pointer-events: none; }
.hero-world::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,rgba(8,11,27,.9) 0%,rgba(8,11,27,.78) 31%,rgba(8,11,27,.28) 54%,rgba(8,11,27,.02) 80%), radial-gradient(circle at var(--pointer-x,68%) var(--pointer-y,40%),rgba(92,155,255,.2),transparent 27%); mix-blend-mode: normal; }
.hero-environment { position: absolute; z-index: 0; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: center; transform: translate3d(var(--world-shift-x,0px),var(--world-shift-y,0px),-20px) scale(1.06); transform-origin: center; transition: transform .55s cubic-bezier(.2,.72,.2,1); }
.hero-orbit-system { position: absolute; z-index: 1; inset: 0; transform: translate3d(var(--orbit-shift-x,0px),var(--orbit-shift-y,0px),0) rotateY(var(--orbit-tilt-y,0deg)) rotateX(var(--orbit-tilt-x,0deg)); transform-style: preserve-3d; transition: transform .35s ease-out; }
.hero-orbit-track { position: absolute; top: 39%; left: 55%; border: 1px solid rgba(122,190,255,.32); border-radius: 50%; transform-style: preserve-3d; box-shadow: 0 0 26px rgba(78,140,255,.14),inset 0 0 24px rgba(90,117,255,.08); }
.hero-orbit-track::after { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(177,148,255,.23); border-radius: inherit; }
.hero-orbit-track--one { width: min(46vw,690px); height: min(27vw,410px); transform: translate(-50%,-50%) rotateX(68deg); animation: hero-orbit-one 34s linear infinite; }
.hero-orbit-track--two { width: min(62vw,910px); height: min(38vw,560px); border-color: rgba(255,191,112,.24); transform: translate(-50%,-50%) rotateX(74deg); animation: hero-orbit-two 48s linear infinite reverse; }
.hero-orbit-track--three { width: min(74vw,1080px); height: min(49vw,720px); border-color: rgba(103,193,255,.18); transform: translate(-50%,-50%) rotateX(79deg); animation: hero-orbit-three 62s linear infinite; }
.hero-orbit-node { position: absolute; top: 0; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(220,235,255,.65); border-radius: 50%; color: #f5eaff; background: radial-gradient(circle at 31% 25%,rgba(255,255,255,.95),rgba(122,197,255,.88) 10%,rgba(72,91,220,.68) 40%,rgba(17,25,63,.82) 76%); box-shadow: 0 0 14px rgba(103,170,255,.65),inset 0 0 12px rgba(255,255,255,.48); font-size: 11px; font-weight: 900; translate: -50% -50%; animation: hero-orbit-counter 34s linear infinite; }
.hero-orbit-track--two .hero-orbit-node { animation-duration: 48s; }
.hero-orbit-track--three .hero-orbit-node { animation-duration: 62s; }
.hero-orbit-track--three .hero-orbit-node:last-child { top: 100%; left: 50%; width: 32px; height: 32px; font-size: 8px; }
.hero-core-pulse { position: absolute; top: 35%; left: 49%; width: clamp(120px,18vw,270px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,194,115,.19),rgba(81,148,255,.12) 34%,transparent 70%); filter: blur(7px); animation: hero-core-breathe 4.2s ease-in-out infinite; }
@keyframes hero-orbit-one { from { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(0deg); } to { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(360deg); } }
@keyframes hero-orbit-two { from { transform: translate(-50%,-50%) rotateX(74deg) rotateZ(0deg); } to { transform: translate(-50%,-50%) rotateX(74deg) rotateZ(-360deg); } }
@keyframes hero-orbit-three { from { transform: translate(-50%,-50%) rotateX(79deg) rotateZ(0deg); } to { transform: translate(-50%,-50%) rotateX(79deg) rotateZ(360deg); } }
@keyframes hero-orbit-counter { to { rotate: -360deg; } }
@keyframes hero-core-breathe { 50% { opacity: .55; scale: .84; } }
.hero-character-layer { position: absolute; z-index: 3; inset: -3%; overflow: visible; pointer-events: none; transform-style: preserve-3d; }
.hero-character-layer img.hero-character { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: drop-shadow(0 26px 32px rgba(1,4,17,.43)) drop-shadow(0 0 18px rgba(77,139,255,.2)); transform: translate3d(var(--character-shift-x,0px),var(--character-shift-y,0px),var(--character-depth,0px)) rotateX(var(--character-tilt-x,0deg)) rotateY(var(--character-yaw,0deg)) scale(var(--character-scale,1)); transform-origin: 73% 52%; transition: transform .3s cubic-bezier(.2,.72,.2,1),filter .3s ease; }
.image-frame-character { position: relative; isolation: isolate; overflow: visible; transform-style: preserve-3d; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.image-frame-character::before,.image-frame-character::after { content: none !important; }
.image-frame-character img { transform: translate3d(var(--image-shift-x, 0px), var(--image-shift-y, 0px), 20px); border-radius: inherit; transition: transform .18s ease-out; }
.hero-orbit-one { width: 112%; height: 52%; left: -7%; top: 26%; }
.hero-orbit-two { width: 124%; height: 64%; left: -12%; top: 20%; border-color: rgba(95, 212, 255, .19); transform: rotateX(68deg) rotateZ(22deg); }
.float-chip { display: none; }
.chip-one { top: 8%; right: 2%; left: auto; }
.chip-two { left: 2%; bottom: 21%; }
.chip-three { right: 2%; bottom: 8%; }
.hero-stage { aspect-ratio: 16 / 10; overflow: visible !important; isolation: isolate; transform-style: preserve-3d; transform: perspective(1500px) rotateX(var(--stage-tilt-x,0deg)) rotateY(var(--stage-tilt-y,0deg)) scale(var(--stage-scale,1)); transition: transform .32s cubic-bezier(.2,.72,.2,1); }
.hero.magic-active .hero-stage { transform: perspective(1500px) rotateX(var(--stage-tilt-x,0deg)) rotateY(var(--stage-tilt-y,0deg)) scale(var(--stage-scale,1)); }
.hero-stage::after { content: ""; position: absolute; z-index: 1; inset: 4%; pointer-events: none; background: radial-gradient(ellipse at var(--pointer-x,67%) var(--pointer-y,44%),rgba(108,144,255,.2),transparent 42%); mix-blend-mode: screen; opacity: .7; transition: opacity .4s ease; }
.hero-stage img.hero-scene { position: absolute; inset: -5% -4%; z-index: 0; display: block; width: 108%; height: 110%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 0; filter: drop-shadow(0 30px 55px rgba(2,5,20,.3)); transform: translate3d(var(--scene-shift-x,0px),var(--scene-shift-y,0px),0) scale(1.035); transform-origin: 60% 50%; transition: transform .4s cubic-bezier(.2,.72,.2,1); -webkit-mask-image: radial-gradient(ellipse 62% 72% at 59% 49%,#000 34%,transparent 100%); mask-image: radial-gradient(ellipse 62% 72% at 59% 49%,#000 34%,transparent 100%); }
.trust-strip { position: relative; }
.ecosystem-stat-chip span { display: grid; place-items: center; font-size: 1.25rem; }
.product-mark-letter { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #f6efff; background: linear-gradient(145deg, #7650f4, #292055); font-size: .72rem; font-weight: 900; letter-spacing: .03em; box-shadow: inset 0 1px rgba(255,255,255,.24), 0 8px 18px rgba(92, 57, 187, .18); }
.ecosystem-products article.new { border-color: rgba(109, 76, 235, .24); }
.ecosystem-products article.new:hover { border-color: rgba(109, 76, 235, .62); }
.ecosystem-products article.new h3 { color: #211444; }
.ecosystem-products article.new p { font-size: .88rem; line-height: 1.58; }
.ecosystem-products article>b { color: #8a7caf; font-size: .72rem; }

/* Conversa demonstrativa do Merlin — conteúdo local, sem conexão com uma IA real. */
.merlin-demo { position: relative; width: min(100%, 440px); min-height: 565px; padding: 0; overflow: hidden; border: 1px solid rgba(174, 151, 255, .38); border-radius: 25px; color: #1c1a2e; background: #fbfaff; box-shadow: 0 34px 95px rgba(0,0,0,.35), 0 0 52px rgba(122,83,249,.2); }
.demo-window-bar { display: flex; height: 42px; align-items: center; gap: 6px; padding: 0 15px; color: #9390a5; background: #f0eef6; border-bottom: 1px solid #e9e5f2; }
.demo-window-bar>span { width: 7px; height: 7px; border-radius: 50%; background: #d3cbdc; }
.demo-window-bar>span:first-child { background: #ff948e; }.demo-window-bar>span:nth-child(2) { background: #f3c66d; }.demo-window-bar>span:nth-child(3) { background: #84d3a2; }
.demo-window-bar b { margin-left: 8px; color: #77748a; font-size: .69rem; font-weight: 700; }
.demo-window-bar b i { color: #a494cb; font-style: normal; }
.demo-window-bar small { margin-left: auto; padding: 5px 7px; border-radius: 99px; color: #7255c6; background: #e9e0ff; font-size: .53rem; font-weight: 900; letter-spacing: .07em; }
.demo-chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; color: white; background: linear-gradient(110deg, #39227f, #7448d7 70%, #8759ee); }
.demo-chat-head img { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; object-fit: cover; }
.demo-chat-head>span { display: grid; gap: 3px; }.demo-chat-head b { font-size: .98rem; }.demo-chat-head small { color: #dfd3ff; font-size: .72rem; }
.demo-chat-head small i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #74e0b0; box-shadow: 0 0 9px #74e0b0; }
.demo-chat-head button { margin-left: auto; border: 0; color: white; background: transparent; font-weight: 900; }
.demo-chat-context { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 14px 16px 8px; padding: 11px 13px; border: 1px solid #ebe5f8; border-radius: 12px; background: #f7f4fd; }
.demo-chat-context>span:first-child { grid-row: span 2; align-self: center; padding: 5px 7px; border-radius: 7px; color: #6242ba; background: #e9e1ff; font-size: .56rem; font-weight: 900; letter-spacing: .06em; }
.demo-chat-context b { color: #312653; font-size: .77rem; }.demo-chat-context>span:last-child { color: #827b97; font-size: .68rem; }
.demo-messages { display: flex; min-height: 310px; flex-direction: column; gap: 14px; padding: 15px 16px 18px; background: linear-gradient(180deg, #fff, #faf9fd); }
.demo-message { max-width: 90%; padding: 13px 15px 10px; border: 1px solid #eee9f7; border-radius: 14px; box-shadow: 0 5px 14px rgba(44,32,79,.045); }
.demo-message>span { display: block; min-height: 1.2em; color: #332a4a; font-size: .84rem; line-height: 1.65; }
.demo-message small { display: block; margin-top: 8px; color: #9992ab; font-size: .64rem; }
.demo-message.student { align-self: flex-end; border-color: #d8cdfd; background: #f0eafe; }
.demo-message.assistant { align-self: flex-start; background: white; }
.demo-answer.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.13em; background: #7855db; animation: merlin-caret .8s steps(2, start) infinite; }
@keyframes merlin-caret { to { visibility: hidden; } }
.demo-chat-input { display: flex; align-items: center; gap: 12px; margin: 0 15px 15px; padding: 8px 9px 8px 15px; border: 1px solid #ded5f4; border-radius: 14px; color: #a49eb1; background: #fff; font-size: .78rem; box-shadow: 0 0 0 3px rgba(120,85,219,.05); }
.demo-chat-input button { display: grid; width: 34px; height: 34px; margin-left: auto; place-items: center; border: 0; border-radius: 10px; color: white; background: #7048d5; font-size: 1.2rem; }
.merlin-demo .merlin-live { position: absolute; top: auto; right: 14px; bottom: 63px; left: auto; padding: 6px 9px; border-radius: 99px; color: #7758bb; background: rgba(237,231,250,.95); font-size: .57rem; letter-spacing: .07em; }
.merlin-demo .merlin-live i { background: #8965d6; box-shadow: 0 0 0 4px rgba(137,101,214,.13); }

/* Graal em destaque: uma maquete editorial, responsiva e explicitamente demonstrativa. */
.graal-section { position: relative; overflow: hidden; padding: clamp(82px, 9vw, 132px) 0; color: #f8f6ff; background: radial-gradient(ellipse at 80% 16%, rgba(99,67,201,.24), transparent 36%), linear-gradient(135deg, #0c1022, #14112e 62%, #10192d); }
.graal-section::before { content: ""; position: absolute; width: 620px; height: 620px; right: -350px; bottom: -400px; border: 1px solid rgba(164,132,255,.2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(164,132,255,.035), 0 0 0 105px rgba(164,132,255,.025); }
.graal-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(270px,.76fr) minmax(0,1.24fr); align-items: center; gap: clamp(38px,6vw,88px); }
.graal-copy .kicker { color: #c4a5ff; }.graal-copy h2 { max-width: 530px; margin: 17px 0 21px; font-size: clamp(2.6rem,4.5vw,4.4rem); line-height: .99; letter-spacing: -.06em; }
.graal-copy h2 span { color: #b89cff; }.graal-copy>p { max-width: 550px; color: #c3c1d2; font-size: 1.02rem; line-height: 1.78; }
.graal-benefits { display: grid; gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; }.graal-benefits li { display: flex; align-items: center; gap: 13px; color: #f2effb; font-size: .91rem; }.graal-benefits b { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(177,143,255,.32); border-radius: 9px; color: #c8adff; background: rgba(124,77,255,.11); font-size: .65rem; }
.graal-copy .button { border: 0; color: #171025; background: linear-gradient(135deg,#dacbff,#a88aff); box-shadow: 0 14px 34px rgba(122,80,240,.26); }
.graal-studio { overflow: hidden; border: 1px solid rgba(186,170,255,.24); border-radius: 22px; background: #f8f7fc; color: #28243a; box-shadow: 0 38px 100px rgba(0,0,0,.38),0 0 45px rgba(127,92,243,.16); transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.graal-topbar { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e7e3ef; background: #fff; }.graal-brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: white; background: linear-gradient(145deg,#875df5,#5135ae); font-weight: 900; }.graal-topbar>b { color: #27213d; font-size: .9rem; }.graal-topbar>b small { color: #8b869a; font-size: .73rem; font-weight: 600; }.graal-save { display: flex; align-items: center; gap: 6px; margin-left: auto; color: #88839a; font-size: .67rem; }.graal-save i { width: 7px; height: 7px; border-radius: 50%; background: #49bd8a; }.graal-publish { padding: 8px 11px; border: 1px solid #e1d9f5; border-radius: 8px; color: #6447b9; background: #f8f5ff; font-size: .68rem; font-weight: 800; }
.graal-workspace { display: grid; grid-template-columns: 142px minmax(0,1fr); min-height: 440px; }.graal-tools { display: flex; flex-direction: column; gap: 8px; padding: 18px 12px; border-right: 1px solid #e7e3ef; background: #f1eff7; }.graal-tools>span { margin-bottom: 6px; color: #9a94a8; font-size: .59rem; font-weight: 900; letter-spacing: .11em; }.graal-tools>b { padding: 10px 9px; border-radius: 8px; color: #777185; font-size: .72rem; font-weight: 700; }.graal-tools>b.selected { color: #5539a7; background: #e6defa; }
.graal-canvas-wrap { padding: 19px; background: #e9e7ef; }.graal-canvas { max-width: 640px; margin: auto; transition: max-width .35s ease; }.graal-canvas.is-mobile-preview { max-width: 300px; }.graal-page-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: #8b849b; font-size: .58rem; font-weight: 900; letter-spacing: .09em; }.graal-page-label>div { display: flex; gap: 4px; }.graal-page-label button { width: 29px; height: 26px; border: 1px solid #dad5e4; border-radius: 6px; color: #777185; background: #fff; }.graal-page-label button.active { border-color: #8f70df; color: #6749bd; background: #f2edff; }.graal-page { overflow: hidden; border: 1px solid #e2deea; border-radius: 10px; background: white; box-shadow: 0 8px 26px rgba(37,31,59,.12); transition: font-size .3s ease; }.is-mobile-preview .graal-page { font-size: .82em; }.graal-page-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #f0edf4; color: #454052; font-size: .65rem; }.graal-page-nav>span { color: #6743c3; font-weight: 900; letter-spacing: .08em; }.graal-page-nav small { color: #817c8c; }.graal-page-nav>b { padding: 7px 10px; border-radius: 7px; color: white; background: #6743c3; font-size: .6rem; }
.graal-page-hero { padding: clamp(21px,3vw,38px) 22px 22px; text-align: center; background: radial-gradient(circle at 50% 0%, #f1eaff, transparent 66%), #fff; }.graal-kicker { color: #7756c2; font-size: .54rem; font-weight: 900; letter-spacing: .13em; }.graal-page-hero h3 { max-width: 470px; margin: 12px auto 8px; color: #29243a; font-size: clamp(1.1rem,2vw,1.72rem); line-height: 1.16; letter-spacing: -.045em; }.graal-page-hero p { margin: 0 auto 16px; color: #777184; font-size: .69rem; line-height: 1.55; }.graal-page-hero>b { display: inline-flex; gap: 12px; align-items: center; padding: 10px 13px; border-radius: 8px; color: white; background: linear-gradient(135deg,#744ee0,#4d2caa); font-size: .67rem; }.graal-page-hero>b i { font-style: normal; }.graal-page-hero>small { display: block; margin-top: 9px; color: #918b9e; font-size: .57rem; }.graal-page-sections { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 13px; border-top: 1px solid #f0edf4; }.graal-page-sections span { display: grid; gap: 7px; padding: 10px; border: 1px solid #efecf4; border-radius: 8px; color: #5e5969; font-size: .6rem; }.graal-page-sections i { color: #956fe9; font-size: .56rem; font-style: normal; font-weight: 900; }
.graal-ai-note { display: flex; align-items: center; gap: 10px; margin: 12px auto 0; padding: 10px 12px; border: 1px solid #dcd3f0; border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 7px 18px rgba(37,31,59,.08); }.graal-ai-note img { width: 29px; height: 29px; border-radius: 50%; object-fit: cover; }.graal-ai-note div { min-width: 0; }.graal-ai-note small { color: #795cb9; font-size: .53rem; font-weight: 900; letter-spacing: .08em; }.graal-ai-note p { margin: 3px 0 0; color: #777184; font-size: .64rem; line-height: 1.45; }.graal-ai-note>span { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; margin-left: auto; border-radius: 50%; color: #278860; background: #e3f8ee; font-size: .7rem; }.graal-bottom { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #e5e1ed; background: #fff; }.graal-bottom>span { color: #8e879a; font-size: .55rem; font-weight: 900; letter-spacing: .06em; }.graal-bottom>div { display: flex; gap: 4px; flex: 1; }.graal-bottom>div i { height: 4px; flex: 1; border-radius: 4px; background: #ddd8e9; }.graal-bottom>div i:nth-child(-n+5) { background: #8564db; }.graal-bottom>b { color: #6c51b4; font-size: .65rem; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 46px); }
  .hero-visual { width: min(100%, 850px); margin: 0 auto; }
  .hero-stage { width: min(112%, 760px); margin-inline: -4%; }
  .hero-copy h1 { font-size: clamp(2.8rem, 5.2vw, 3.7rem); }
  .graal-shell { grid-template-columns: 1fr; }
  .graal-copy { max-width: 760px; }
  .graal-studio { max-width: 850px; width: 100%; margin: 0 auto; transform: none; }
  .merlin-demo { margin: auto; }
}
@media (min-width: 761px) {
  .hero-grid { padding-top: 12px; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-world::after { background: linear-gradient(180deg,rgba(8,11,27,.94) 0%,rgba(8,11,27,.78) 35%,rgba(8,11,27,.25) 72%,rgba(8,11,27,.65) 100%), radial-gradient(circle at var(--pointer-x,68%) var(--pointer-y,40%),rgba(92,155,255,.13),transparent 30%); }
  .hero-environment,.hero-character-layer img.hero-character { object-position: 66% center; }
  .hero-environment { inset: -2% -24%; width: 148%; height: 104%; }
  .hero-character-layer { inset: -2% -24%; }
  .hero-character-layer img.hero-character { width: 148%; height: 104%; }
  .hero-orbit-track { left: 62%; top: 46%; }
  .hero-orbit-track--one { width: 70vw; height: 42vw; }
  .hero-orbit-track--two { width: 92vw; height: 57vw; }
  .hero-orbit-track--three { width: 118vw; height: 76vw; }
  .hero-orbit-node { width: 34px; height: 34px; font-size: 9px; }
  .hero-core-pulse { top: 42%; left: 51%; width: 42vw; }
  .hero-copy h1 { font-size: clamp(2.75rem, 12vw, 4.3rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-visual { padding: 12px; }
  .hero-stage { width: 112%; aspect-ratio: 4 / 3; margin: 20px -6% 8px; transform: none; }
  .hero-stage img.hero-scene { inset: 0; width: 100%; height: 100%; object-position: 59% center; -webkit-mask-image: radial-gradient(ellipse 70% 72% at 58% 50%,#000 42%,transparent 100%); mask-image: radial-gradient(ellipse 70% 72% at 58% 50%,#000 42%,transparent 100%); }
  .float-chip { max-width: 72%; padding: 9px 11px; font-size: .68rem; }
  .chip-one { right: -1%; }.chip-two { left: -1%; }.chip-three { right: -1%; }
  .graal-section { padding: 78px 0; }
  .graal-copy h2 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .graal-studio { border-radius: 15px; }
  .graal-workspace { grid-template-columns: 92px minmax(0,1fr); min-height: 390px; }
  .graal-tools { padding: 13px 7px; }.graal-tools>b { padding: 9px 6px; font-size: .63rem; }
  .graal-canvas-wrap { padding: 12px 9px; }
  .graal-page-nav { padding: 9px; }.graal-page-nav small { font-size: .52rem; }
  .graal-page-hero { padding: 24px 12px 16px; }.graal-page-hero h3 { font-size: 1.05rem; }
  .graal-page-sections { gap: 5px; padding: 8px; }.graal-page-sections span { padding: 7px 5px; font-size: .52rem; }
  .graal-bottom { padding: 10px; }.graal-bottom>span { max-width: 125px; line-height: 1.3; }
}
@media (max-width: 520px) {
  .merlin-demo { min-height: 0; }.demo-messages { min-height: 260px; }
  .graal-topbar { gap: 7px; padding-inline: 8px; }.graal-save { display: none; }
  .graal-publish { margin-left: auto; padding: 7px; font-size: .61rem; }
  .graal-workspace { grid-template-columns: 1fr; }.graal-tools { display: none; }
  .graal-canvas-wrap { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-stage,.hero-stage img.hero-scene,.hero-character,.hero-orbit-track,.hero-orbit-node,.hero-core-pulse,.demo-answer.is-typing::after { animation: none !important; transition: none !important; }
  .hero-stage,.hero-orbit-system,.hero-character-layer { transform: none !important; }
  .graal-studio,.graal-canvas,.graal-page { transition: none !important; }
}