/* Datylux — atmospheric visual study, local preview only. */
body{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:0}
h1,h2,h3,.kinetic-type,.step-number,.price{font-family:Outfit,"DM Sans",sans-serif}
.hero{isolation:isolate;background:radial-gradient(ellipse at 88% 18%,#143b78 0,transparent 47%),linear-gradient(135deg,#061126 25%,#081c3d 69%,#071326);padding-top:70px}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.signal-field{position:absolute;top:-145px;right:-22%;width:1120px;height:1020px;background:url("/assets/astra/signal-contours.svg") center/100% 100% no-repeat;opacity:.85;mask-image:linear-gradient(90deg,transparent,black 36%);transform:translateY(calc(var(--hero-progress) * -85px)) rotate(calc(-7deg + var(--hero-progress) * 5deg));transform-origin:70% 45%}
.signal-glow{position:absolute;width:630px;height:630px;right:-240px;top:60px;border-radius:50%;background:radial-gradient(ellipse,#13bdd22e,transparent 68%);transform:translateY(calc(var(--hero-progress) * 70px))}
.hero::after,.closing::after{content:"";position:absolute;inset:0;background:url("/assets/astra/surface-grain.svg");opacity:.065;pointer-events:none;z-index:-1}
.hero-grid{height:100%;width:100%;opacity:.55;background-image:radial-gradient(#a5cbff55 .7px,transparent .7px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent 15%,black 80%);z-index:-1}
.hero-trend{display:none}
.hero h1{font-weight:550;letter-spacing:-.058em;line-height:1;max-width:1100px}
/* Clip the gradient on the text itself, not its animated overflow wrapper. */
.hero h1 .accent{color:#3987ff}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .hero h1 .accent>span{background:linear-gradient(100deg,#3987ff 7%,#3987ff 43%,#66dceb 96%);color:transparent;background-clip:text;-webkit-background-clip:text}
}
.hero-copy{color:#d1dcee}
.hero-divider{border-color:#a9cfff30}
.hero .button{box-shadow:0 5px 30px #1769ff38,inset 0 1px 0 #ffffff2b}
.dashboard-perspective{padding-bottom:47px}
.dashboard{background:linear-gradient(135deg,#0d213d,#081427 65%);border-color:#90bfff50;box-shadow:0 0 0 7px #70aaff05,0 35px 100px #0008,0 -15px 90px #1769ff18}
.metrics>div{background:linear-gradient(135deg,#79aaff08,#ffffff01);border-color:#9bbfe820}
.dash-heading h2,.mini-window h3,.chart-head h3{font-family:"DM Sans",sans-serif}
.dashboard-note{color:#a2b6d2}
.workflow{position:relative;isolation:isolate;background:radial-gradient(ellipse at 94% 30%,#dbeaff 0,transparent 60%),linear-gradient(110deg,#f7faff,#edf4fd);border-top:1px solid #a2caff40}
.workflow::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#3773b946 .7px,transparent .7px);background-size:24px 24px;mask-image:linear-gradient(90deg,transparent,black);pointer-events:none;z-index:-1}
.workflow::after{content:"";position:absolute;right:0;top:0;width:63%;height:100%;background:url("/assets/astra/signal-contours.svg") right top/1100px 1100px repeat-y;opacity:.09;pointer-events:none;z-index:-1}
.section-heading{padding-top:85px;margin-bottom:20px}
.section-heading h2,.demo-heading h2,.pricing-heading h2{font-weight:500;letter-spacing:-.05em}
.section-heading h2>span{color:#497093}
.js .workflow-track{height:220vh;min-height:1350px}
.workflow-step{background:transparent;border-top-color:#b9cce2}
.workflow-step strong{font-family:Outfit,sans-serif;font-weight:500;letter-spacing:-.035em}
.workflow-step.is-active{border-color:#1769ff}
.workflow-stage{border:1px solid #ffffff;background-color:#e0edff;background-image:radial-gradient(ellipse at 40% 30%,#fff 0,transparent 66%),radial-gradient(#1769ff26 .8px,transparent .8px);background-size:auto,20px 20px;box-shadow:inset 0 0 65px #78adff18,0 25px 60px #15396612,0 2px 8px #15396606;border-radius:22px}
.mini-window{box-shadow:0 24px 45px #143a6538,0 0 0 5px #ffffff50;border-color:#234774;background:linear-gradient(140deg,#102544,#061126)}
.report-paper{box-shadow:0 24px 45px #16385533}
.kinetic-band{position:relative;background:linear-gradient(110deg,#0b285a,#061126);border-block:1px solid #75b0ff30;padding:36px 0 42px}
.kinetic-type{font-weight:500;letter-spacing:-.05em}
.kinetic-type>span:first-child{color:#63a6ff}
.demo-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 75% 48%,#163c78 0,#0a1c3a 45%,#061126 75%);padding-top:85px}
.demo-section::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/astra/signal-contours.svg") 100% 0/1250px 1000px no-repeat;opacity:.25;pointer-events:none}
.demo-heading h2>span{color:#84c4f2}
.video-stage{border-color:#92c8ff66;box-shadow:0 0 0 7px #82baff06,0 35px 85px #0006,0 0 100px #1769ff20;border-radius:16px}
.video-footer,.transcript{color:#bbcae1}
.plans-atmosphere{position:relative;isolation:isolate;background:radial-gradient(ellipse at 90% 0,#d4e7ff,transparent 54%),linear-gradient(115deg,#f7faff,#edf4fc);border-top:1px solid #c8dcf1}
.plans-atmosphere::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#1769ff24 .7px,transparent .7px);background-size:25px 25px;pointer-events:none;z-index:-1;mask-image:linear-gradient(180deg,black,transparent 85%)}
.pricing-section{padding-top:85px;padding-bottom:65px;gap:35px;grid-template-columns:1.25fr 1fr 1.1fr;align-items:stretch}
.pricing-heading{padding-top:14px}
.plan{padding:28px 12px}
.plan h3{font-weight:500}
.plan.pro{position:relative;overflow:hidden;border:1px solid #3263a0;border-radius:20px;padding:28px;color:#f4f8ff;background:radial-gradient(ellipse at 100% 0,#174884,transparent 66%),linear-gradient(130deg,#0b2344,#061126);box-shadow:0 18px 45px #1736641c}
.plan.pro .price{color:#86c9ff}
.plan.pro .price-period{color:#b1c3dc}
.plan.pro li:before{color:#5dd7e4}
.plan.pro .button{box-shadow:inset 0 1px 0 #ffffff35}
.price{font-weight:500;letter-spacing:-.06em}
.pricing-note{line-height:1.65;margin-top:-12px}
.faq-section{padding-bottom:80px}
.faq{border-color:#b8cde3}
.faq:last-child{border-color:#b8cde3}
.faq summary:hover{color:var(--blue)}
.closing{isolation:isolate;background:radial-gradient(ellipse at 50% 160%,#27cfe9 0,#1769ff 31%,#123a72 48%,#061126 77%);padding:90px 0 65px}
.closing::before{content:"";position:absolute;inset:0;background:url("/assets/astra/signal-contours.svg") center 48%/1450px 900px no-repeat;opacity:.42;z-index:-1;pointer-events:none;transform:rotate(-12deg)}
.closing-grid{opacity:.7;background-image:radial-gradient(#95c8ff66 .8px,transparent .8px);background-size:25px 25px;mask-image:linear-gradient(0deg,black,transparent 90%);z-index:-1}
.closing h2{font-weight:500;letter-spacing:-.045em}
.closing h2>span{color:#8edcf4}
.closing-note{color:#bccee9}
.closing .button{border-color:#609aff;box-shadow:0 10px 40px #0003,inset 0 1px 0 #ffffff40}
.footer{padding-block:30px}
@media(min-width:1550px){.signal-field{width:1400px;right:-15%}}
@media(max-width:1100px){.signal-field{right:-45%;opacity:.7}.pricing-section{gap:24px;grid-template-columns:1.1fr 1fr 1.1fr}.plan.pro{padding:23px 19px}.plan{padding:23px 5px}.price{font-size:62px}}
@media(max-width:760px){
 .hero{padding-top:49px;background:radial-gradient(ellipse at 110% 15%,#12396f 0,transparent 58%),#061126}
 .hero h1{font-size:clamp(36px,10.5vw,78px);letter-spacing:-.055em;line-height:1.12}
 /* Solid text avoids Safari gradient/compositing failures during the entrance. */
 .hero h1 .accent,.hero h1 .accent>span{background:none;color:#63a6ff;-webkit-text-fill-color:#63a6ff}
 .hero .title-line{overflow:visible}
 .js .hero .title-line>span{animation:mobile-title-enter .7s var(--ease) both}
 .signal-field{width:800px;height:800px;top:-130px;right:-450px;opacity:.65;mask-image:linear-gradient(90deg,transparent 24%,black 80%)}
 .signal-glow{right:-420px;top:40px}.hero-copy{font-size:14px}.hero-actions .button{min-height:47px}.hero-grid{opacity:.32}
 .dashboard-perspective{padding-bottom:30px}.dashboard{box-shadow:0 20px 65px #0006,0 0 45px #1769ff14}
 .section-heading{padding-top:60px;margin-bottom:28px}.workflow::after{width:100%;opacity:.065}
 .js .workflow-track{height:auto;min-height:0}.workflow-stage{border-radius:16px}.workflow-sticky{padding-bottom:50px}
 /* Keep the whole phrase visible; only the arrow moves with scrolling. */
 .kinetic-band{padding:30px 20px}
 .kinetic-type{width:100%;white-space:normal;font-size:clamp(32px,8.5vw,60px);line-height:1.12;transform:none;will-change:auto;text-align:center}
 .kinetic-type>span:first-child{display:block}
 .kinetic-star{position:absolute;right:18px;bottom:34px;padding:0;font-size:.65em}
 .demo-section{padding:60px 0 36px}.demo-section::before{opacity:.18;background-position:40% 0}.video-stage{border-radius:9px}
 .pricing-section{grid-template-columns:1fr 1fr;gap:28px 16px;padding-top:55px;padding-bottom:42px}
 .pricing-heading{padding-top:0}.plan{padding:22px 0}.plan.pro{padding:22px 15px;border-radius:14px}
 .plan h3{font-size:24px}.price{font-size:54px}.plan li{font-size:11px}.plan .button{font-size:10px;min-height:48px}
 .pricing-note{margin-top:-9px}.faq-section{padding-bottom:55px}.closing{padding:62px 0 44px}.closing::before{opacity:.3;background-size:1000px 850px}
 .closing h2{font-size:clamp(32px,7.4vw,53px)}
}
@media(max-width:370px){.pricing-section{column-gap:12px}.plan.pro{padding-inline:11px}.plan li{font-size:10px}.price{font-size:48px}.hero-copy{font-size:13px}}
@media(prefers-reduced-motion:reduce){.signal-field,.signal-glow{transform:none}.js .workflow-track{height:auto;min-height:0}}

@keyframes mobile-title-enter{from{opacity:0}to{opacity:1}}