/* TOKENS */
:root{
  --bg:#0b0f19; --panel:#0f1524; --panel-2:#0a1221; --line:#162134;
  --text:#e8edf6; --muted:#8a94ad; --accent:#00d6ff; --accent-2:#5cf0ff;
  --radius:20px; --shadow:0 20px 60px rgba(0,0,0,.45);
}

/* RESET / BASE */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:15.5px/1.65 "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:"Syne",ui-sans-serif,system-ui;color:#f2f5fb;line-height:1.08;margin:.2em 0 .5em}
h1{font-size:52px} h2{font-size:34px} h3{font-size:22px}
p{margin:0 0 1em} .muted{color:var(--muted)}
a{color:var(--text);text-decoration:none} a:hover{color:#fff}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
.container{width:min(1200px,92%);margin-inline:auto}
.radius{border-radius:14px}
.skip{position:absolute;left:-9999px} .skip:focus{position:fixed;left:14px;top:14px;background:#111;color:#fff;padding:8px 12px;z-index:10000}

/* NAVBAR */
.site-nav{position:sticky;top:0;z-index:1000;background:rgba(8,12,22,.72);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .glyph{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#3ae2ff,#6ff);display:grid;place-items:center}
.brand .ai{color:var(--accent)}
.main-nav .menu{display:flex;gap:24px;align-items:center}
.main-nav a{color:#aab6cd;font-weight:600;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s}
.main-nav a:hover{color:#fff}.main-nav a:hover::after{width:100%}
.has-sub{position:relative}
.has-sub>.sub{position:absolute;left:0;top:calc(100% + 12px);background:#0f1526;border:1px solid #1a2b45;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:10px;min-width:220px;display:none}
.has-sub:hover>.sub{display:block}
.sub a{display:block;padding:9px 12px;color:#c9d6ea}.sub a:hover{background:#0c1426;border-radius:8px;color:#fff}
.actions{display:flex;align-items:center;gap:12px}
.icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.08);color:#c9d6ea}
.icon:hover{background:#0f1628;color:#fff}
.icon.burger{display:none}
.icon.burger span{display:block;width:18px;height:2px;background:currentColor;margin:3px 0;border-radius:2px}

/* OFFCANVAS MOBILE */
.offcanvas{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}
.offcanvas nav{width:min(92%,420px);background:#0f1526;border:1px solid #1a2b45;border-radius:16px;padding:18px}
.offcanvas ul{display:grid;gap:10px}
.offcanvas .divider{height:1px;background:#1a2b45;margin:6px 0}
.offcanvas .btn.block{display:block;text-align:center}
.offcanvas .close{position:absolute;top:16px;right:16px}
.offcanvas.is-open{opacity:1;pointer-events:auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#001018;border:none;border-radius:999px;padding:14px 22px;font-weight:800;letter-spacing:.2px;transition:transform .15s,box-shadow .2s,background-position .3s;background-size:200% 100%;box-shadow:0 20px 60px rgba(0,214,255,.38),0 0 0 1px rgba(255,255,255,.04) inset}
.btn:hover{transform:translateY(-2px);background-position:100% 0}
.btn.small{padding:10px 14px}

/* HERO */
.hero{position:relative;min-height:100vh;display:grid;align-items:center;overflow:clip;background-image:url('../img/headerAI.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(110%) contrast(92%)}
.hero::before{content:"";position:absolute;inset:-1px;background:
  radial-gradient(60% 60% at 85% 20%, rgba(0,214,255,.18) 0%, rgba(0,214,255,0) 60%),
  radial-gradient(45% 45% at 10% 80%, rgba(0,214,255,.12) 0%, rgba(0,214,255,0) 60%);pointer-events:none;z-index:0}
.hero .grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:38px}
.tag{display:inline-flex;align-items:center;gap:8px;background:#081226;border:1px solid #0d223d;border-radius:999px;padding:6px 12px;color:var(--muted);font:800 12px/1 "Plus Jakarta Sans";letter-spacing:.9px}
.hero h1{font-weight:800;letter-spacing:.2px;margin:.1em 0 .35em}
.hero .sub{max-width:48ch;font-size:16px;color:#c8d6ef}
.cta{display:flex;align-items:center;gap:22px;margin-top:12px}
.stat .num{font:800 40px/1 "Syne";background:linear-gradient(90deg,#fff,#c9f7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .sublabel{font-size:13px;color:#b7c7e3}
.media{border-radius:20px;overflow:hidden;border:1px solid #153056;background:#08101e;box-shadow:var(--shadow);aspect-ratio:16/12;display:grid;place-items:center}
.mock{width:100%;height:100%;background-image:url('img/headerai.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(110%) contrast(92%)}
@media (max-width:1024px){.mock{background-position:70% center}}

/* LOGO BELT */
.logo-belt{background:#070e1a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.logo-belt .row{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap;opacity:.95}
.logo-belt img{height:26px;filter:invert(1) grayscale(1) brightness(1.15) contrast(.9);opacity:.92}

/* GENERIC SECTIONS */
.section{padding:78px 0}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.card{border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:28px 28px 28px 28px;box-shadow:var(--shadow)}
.head.center{text-align:center;margin-bottom:28px}

/* PROGRESS */
.progress-list{display:grid;gap:16px;margin:20px 0}
.progress-list .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#cfe6f3;font-weight:700}
.progress{height:10px;background:#0e1b2f;border-radius:999px;overflow:hidden;border:1px solid #13233c}
.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 24px rgba(0,214,255,.35) inset;transition:width 1.1s cubic-bezier(.2,.7,0,1)}

/* PORTFOLIO */
.grid-portfolio{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{grid-column:span 4;background:#0c1426;border:1px solid #14233b;border-radius:16px;overflow:hidden;position:relative;transition:transform .2s,box-shadow .2s}
.tile.big{grid-column:span 6}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile h3{font:700 16px/1.4 "Plus Jakarta Sans";padding:12px 14px 16px;margin:0;color:#dfe9f7}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.35)}

/* CHIPS */
.chips{margin-top:18px;color:#a7b8d6}

/* SERVICES */
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.service .link{color:var(--accent)} .service .link:hover{text-decoration:underline}

/* FEATURE */
.feature .ticks{display:grid;gap:10px;margin:16px 0}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent)}

/* PRICING */
.grid-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price .value{font:800 28px/1 "Syne";margin:.2em 0}
.price .value span{font:700 16px/1 "Plus Jakarta Sans";margin-right:2px;color:#b7d6ff}
.price .list{display:grid;gap:8px;margin:10px 0 16px}
.price.featured{outline:2px solid rgba(0,214,255,.35);box-shadow:0 16px 48px rgba(0,214,255,.15)}

/* TESTIMONIALS */
.grid-testi{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:18px}
.tcard{background:#0f1628;border:1px solid #1a2844;border-radius:16px;padding:18px}
.tcard .stars{color:#ffd34d;letter-spacing:2px}
.tcard .meta{margin-top:10px;color:#bcd2ea}
.statsbox{display:grid;place-items:center;background:#0c1526;border:1px solid #1a2b45;border-radius:16px;font:800 28px/1 "Syne"}

/* CTA VIDEO */
.cta-video .block{position:relative;border-radius:18px;overflow:hidden;border:1px solid #1a2b45}
.cta-video img{width:100%;height:320px;object-fit:cover;filter:saturate(105%)}
.cta-video .play{position:absolute;inset:auto auto 16px 16px;background:#0009;border:1px solid #fff3;color:#fff;border-radius:999px;padding:10px 16px;cursor:pointer}
.cta-video h3{position:absolute;left:16px;top:16px;margin:0}

/* FAQ */
.faq-list details{background:#0f1628;border:1px solid #1a2844;border-radius:12px;padding:12px;margin-bottom:12px}
.faq-list summary{cursor:pointer;font-weight:700}
.faq-list p{margin:.6em 0 0}

/* BLOG */
.grid-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{border:1px solid #1a2b45;background:#0f1628;border-radius:16px;overflow:hidden}
.bcard img{height:160px;object-fit:cover}
.bcard .content{padding:14px}
.bcard .link{color:var(--accent)}

/* FOOTER */
.footer{background:#070e1a;border-top:1px solid var(--line);margin-top:40px}
.grid-footer{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr;gap:24px;padding:34px 0}
.footer h5{margin-bottom:8px}
.footer .newsletter{display:flex;gap:10px}
.footer .newsletter input{flex:1;background:#0d1424;color:#e6e8ee;border:1px solid #1a2a44;border-radius:10px;padding:.6rem .9rem}
.footer .social{display:flex;gap:10px;margin-top:10px}
.footer .social a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0f1628;border:1px solid #1a2b45}
.copyright{text-align:center;color:#97a5c3;border-top:1px solid #0f1a2b;padding:14px 0}

/* REVEAL / ANIMS */
.reveal{opacity:0;transform:translateY(24px) scale(.98);filter:blur(2px);transition:opacity .7s,transform .7s,filter .7s;will-change:transform,opacity}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal[x-zoom]{transform:scale(.96)} .reveal[x-slide="left"]{transform:translateX(-24px)} .reveal[x-slide="right"]{transform:translateX(24px)}
.reveal[x-delay="1"]{transition-delay:.08s} .reveal[x-delay="2"]{transition-delay:.16s} .reveal[x-delay="3"]{transition-delay:.24s}

/* RESPONSIVO */
@media (max-width:1024px){
  h1{font-size:42px}
  .hero .grid,.split{grid-template-columns:1fr}
  .grid-portfolio{grid-template-columns:repeat(6,1fr)}
  .tile{grid-column:span 3}.tile.big{grid-column:span 6}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .grid-pricing{grid-template-columns:1fr}
  .grid-testi{grid-template-columns:1fr}
  .grid-blog{grid-template-columns:1fr 1fr}
  .grid-footer{grid-template-columns:1fr 1fr}
  .icon.burger{display:inline-grid}
  .main-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}