/* PRODINO v4 — deep navy-to-blue hero, matching navy header, light content, accessible contrast */
:root{--page:#e9edf8;--hair:rgba(56,76,140,.17);--ink:#252a3a;--sub:#656e8c;--b1:#3b63ff;--b2:#8aa8ff;--shadow:0 30px 80px rgba(20,40,140,.16)}
body{background:var(--page);color:var(--sub);font-weight:300}
h1,h2,h3{font-weight:300;letter-spacing:0;color:var(--ink)}
h1{font-size:clamp(40px,6vw,74px);line-height:1.4}
h2{font-size:clamp(28px,3.8vw,48px);line-height:1.45}
h3{font-weight:500;font-size:16px}
.blue-text{background:linear-gradient(270deg,var(--b2),var(--b1));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lead,p{color:var(--sub)}
.eyebrow{color:#7b86ad;font-weight:500}.eyebrow::before{background:var(--b1);width:18px}
.btn{border-radius:8px;min-height:46px;font-weight:500}
.btn-primary{background:linear-gradient(270deg,#7ea0ff,#3b63ff);box-shadow:0 10px 28px rgba(59,99,255,.35)}
.btn-outline{background:transparent;border-color:rgba(37,42,58,.25);color:var(--ink)}

/* header */
.header{height:70px;background:#0c2149;border-bottom:1px solid rgba(255,255,255,.12)}
.logo img{width:128px}
.nav-links a{color:#b4bcdb;font-weight:400}.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-cta{background:#fff!important;color:#0c2149!important;box-shadow:none!important;min-height:40px;padding:6px 18px}
.menu-toggle{color:#fff;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.25)!important}.menu-toggle svg{color:#fff}
.nav-links.open{background:#102b60;border:1px solid rgba(255,255,255,.1)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:84px 0 180px;background:radial-gradient(ellipse 68% 55% at 22% 85%,rgba(111,156,255,.20),transparent 75%),linear-gradient(180deg,#0c2149 0%,#112d65 26%,#1d46a0 52%,#2c61d0 72%,#5785ed 86%,#a0b9f5 95%,var(--page) 100%)}
.hero::after{display:none}
.hero::before{content:"";position:absolute;z-index:0;top:auto;left:-10%;right:-10%;width:auto;bottom:-30%;height:85%;background:radial-gradient(55% 60% at 30% 100%,rgba(103,144,255,.70) 0,rgba(103,144,255,0) 72%);animation:rise 1.9s cubic-bezier(.2,.7,.2,1) both;pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(45%)}to{opacity:1;transform:none}}
.hero>.container{position:relative;z-index:1}
.hero h1{color:#aab2cf}
.hero h1 .w{color:#aab2cf;-webkit-text-fill-color:#aab2cf}
.hero h1 .blue-text{background:none;color:#fff;-webkit-text-fill-color:#fff}
.hero h1 .blue-text .w{color:#fff;-webkit-text-fill-color:#fff}
.hero p,.hero-meta span,.product-state{color:#c3cbea}
.hero .tag{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#c7d0f2;border-radius:6px;font-weight:400}
.hero .tag-dot{background:#3ddc97;box-shadow:none;border-radius:1px}
.hero .btn-outline{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);color:#fff}
/* Hero controls keep legible contrast as the gradient becomes brighter. */
.hero .btn-primary{background:linear-gradient(115deg,#e8f1ff,#fff);color:#143e86;border-color:rgba(255,255,255,.85);box-shadow:0 14px 34px rgba(10,30,91,.24)}
.hero .btn-primary:hover{box-shadow:0 16px 40px rgba(10,30,91,.32)}
.hero-meta span{color:#fff;background:rgba(8,29,72,.48);padding:5px 9px;border:1px solid rgba(255,255,255,.12);border-radius:7px}
.hero-meta svg{color:#dbe8ff}
.hero-stage,.product-stage{position:relative}
.hero-stage::before{content:"";position:absolute;z-index:0;width:auto;aspect-ratio:auto;border-radius:50%;inset:10% 8%;background:radial-gradient(closest-side,rgba(100,140,255,.55),transparent);filter:blur(28px)}
.hero-image{position:relative;z-index:1;filter:drop-shadow(0 40px 60px rgba(8,25,150,.55));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.stage-orbit{border-color:rgba(255,255,255,.2)!important;background:none!important}.stage-line{background:rgba(255,255,255,.25)!important}
.product-stage .float-tag,.floating-label,.float-tag{background:rgba(8,14,50,.62);color:#dbe3ff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);font-weight:400;border-radius:6px;box-shadow:none!important}
.product-stage .float-tag{background:rgba(8,14,50,.62)!important;color:#dbe3ff!important}
.process-step::before,.process-step::after{display:none}
.dashboard{border-radius:14px;border:1px solid rgba(255,255,255,.55);box-shadow:0 40px 90px rgba(5,15,100,.35)}

/* hero entrance: blurred words resolve one by one, rest fades in after */
.js .hero h1 .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(10px);animation:wordin .95s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*.11s + .2s)}
@keyframes wordin{to{opacity:1;filter:blur(0);transform:none}}
.js .hero-copy>:not(h1){opacity:0;animation:up .9s ease forwards;animation-delay:1.1s}
.js .hero-copy>.tag{animation-delay:.1s}
.js .hero-stage,.js .product-stage{opacity:0;animation:up 1.3s cubic-bezier(.2,.7,.2,1) .9s forwards}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* value strip floats over the glow */
.divider-strip{background:none;border:0;padding:0;margin-top:-92px;position:relative;z-index:2}
.value-strip{background:rgba(255,255,255,.62);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);border-radius:14px;box-shadow:var(--shadow);padding:22px 28px}
.value strong{color:var(--ink);font-weight:500}.value small{color:var(--sub)}
.value-ico{background:none;border:1px solid var(--hair);border-radius:8px;color:var(--b1)}

/* sections + hairline column panels */
.section{padding:104px 0}
.services-grid,.modules-grid,.process-grid,.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;border:1px solid var(--hair);background:rgba(255,255,255,.5);overflow:hidden;border-radius:0}
.service-card,.module-card,.process-step,.roadmap-card{background:transparent!important;border:0!important;border-radius:0!important;padding:26px 24px 32px;box-shadow:1px 0 0 var(--hair),0 1px 0 var(--hair)!important}
.service-card.featured,.primary-roadmap{background:linear-gradient(180deg,rgba(59,99,255,.1),transparent)!important}
.service-icon{width:100%;height:124px;margin:0 0 14px;padding-bottom:30px;display:grid;place-items:center;border:0;border-radius:0;box-shadow:none;color:var(--b1);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Cg fill='rgba(47,85,240,.07)' stroke='%238EA0D6' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='70,50 130,80 70,110 10,80'/%3E%3Cpolygon points='70,38 130,68 70,98 10,68'/%3E%3Cpolygon points='70,26 130,56 70,86 10,56'/%3E%3Cpolygon points='70,14 130,44 70,74 10,44'/%3E%3C/g%3E%3C/svg%3E") center/auto 100% no-repeat}
.service-icon svg{width:30px;height:30px}
.service-card .en{color:#8a94b8;font-weight:500}
.service-card p,.module-card p,.process-step p,.roadmap-card p{font-size:14px;line-height:1.9}
.process-num,.big-num{font-size:46px;font-weight:300;line-height:1.2;background:linear-gradient(270deg,var(--b2),var(--b1));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.insight-panel,.arch-item{background:rgba(255,255,255,.6);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow)}
.software-teaser{background:radial-gradient(60% 90% at 15% 110%,#3b63ff,transparent 70%),linear-gradient(180deg,#050b2c,#0c1a6e);border-radius:18px;padding:clamp(24px,4vw,56px);color:#fff;border:0}
.software-teaser h2{color:#e9edff}.software-teaser .lead{color:#c3cbea}
.software-teaser .blue-text{background:none;-webkit-text-fill-color:#fff;color:#fff}
.chip-row span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dbe3ff;border-radius:6px}
.cta-band{background:radial-gradient(60% 120% at 20% 120%,#3b63ff,transparent 70%),linear-gradient(180deg,#050b2c,#0c1a6e);border-radius:18px;border:0}
.cta-band h2{color:#fff}.cta-band p{color:#c3cbea}.btn-white{color:#0c2149}
.footer{background:#0c2149;color:#9ca6cb;border-top:0}.footer a{color:#c3cbea}.footer-brand span{color:#7f8ab4}.footer-bottom{border-color:rgba(255,255,255,.1)}.footer img{width:130px}

/* scroll reveal: blur + rise, columns staggered like the video */
.js [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.js [data-reveal].visible{opacity:1;transform:none;filter:none}
:is(.services-grid,.modules-grid,.process-grid,.roadmap)>:nth-child(4n+2){transition-delay:.12s}
:is(.services-grid,.modules-grid,.process-grid,.roadmap)>:nth-child(4n+3){transition-delay:.24s}
:is(.services-grid,.modules-grid,.process-grid,.roadmap)>:nth-child(4n){transition-delay:.36s}
@media(max-width:820px){.hero{padding:56px 0 140px}.divider-strip{margin-top:-70px}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero-image,.js .hero h1 .w,.js .hero-copy>*,.js .hero-stage,.js .product-stage{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}.js [data-reveal]{transition:none;filter:none}}