/* =========================================================
   MAGNA.DIGITAL — Design System
   navy #0a1120 · white #eef1f6 · red #e5231a
   Bebas Neue (display) + Inter (body)
========================================================= */
:root{
  --ink:#0a1120;
  --ink-2:#0f1930;
  --ink-3:#17243f;
  --paper:#f2f5fa;
  --paper-2:#e3e8f1;
  --line-dark:rgba(255,255,255,.10);
  --line-light:rgba(10,17,32,.10);
  --text-dark:#0a1120;
  --text-dark-soft:#46506a;
  --text-light:#eef1f6;
  --text-light-soft:#94a0b8;
  --accent:#e5231a;
  --accent-2:#ff6a5a;
  --accent-deep:#c81e10;
  --radius:18px;
  --radius-lg:26px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--ink);
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.02;letter-spacing:.01em}
.display{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;line-height:.94}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;color:var(--accent);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:.98rem;text-decoration:none;
  padding:15px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
  min-height:48px;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 30px -10px rgba(229,35,26,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(229,35,26,.75)}
.btn-ghost{background:transparent;color:var(--text-light);border-color:var(--line-dark)}
.btn-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:#000}
.btn:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}

/* ============ NAV ============ */
header.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(10,17,32,.78);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font-family:'Inter',sans-serif;font-weight:800;font-size:1.14rem;letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.06em;color:#fff;white-space:nowrap}
.logo .dot{width:7px;height:7px;border-radius:1px;background:var(--accent);display:inline-block;margin:0 .16em;transform:translateY(2px)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{font-size:.92rem;color:var(--text-light-soft);font-weight:500;transition:color .2s;padding:6px 0}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;border-bottom:2px solid var(--accent)}
.nav-cta{display:flex;align-items:center;gap:.8rem}

/* mobile menu */
.menu-btn{display:none;background:transparent;border:1px solid var(--line-dark);border-radius:10px;
  width:44px;height:44px;cursor:pointer;color:var(--text-light);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:12px 24px 20px;border-top:1px solid var(--line-dark);background:rgba(10,17,32,.97)}
.mobile-menu a{padding:13px 4px;font-size:1rem;color:var(--text-light-soft);font-weight:500;border-bottom:1px solid var(--line-dark)}
.mobile-menu a.active{color:#fff}
.mobile-menu.open{display:flex}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .menu-btn{display:inline-flex}
}

/* ============ SECTIONS ============ */
section{padding:100px 0}
.light{background:var(--paper);color:var(--text-dark)}
.light .eyebrow{color:var(--accent-deep)}
.light .eyebrow::before{background:var(--accent-deep)}
.light .muted{color:var(--text-dark-soft)}
.dark{background:var(--ink)}
.muted{color:var(--text-light-soft)}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:18px 0 16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{font-size:1.08rem}

/* ============ HERO ============ */
.hero{position:relative;padding:110px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% -10%,rgba(229,35,26,.20),transparent 55%),
             radial-gradient(90% 70% at 10% 110%,rgba(46,92,168,.16),transparent 60%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,8vw,6rem);margin:22px 0 20px}
.hero h1 .hl{color:var(--accent)}
.hero p.lead{font-size:1.15rem;color:var(--text-light-soft);max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ============ MEDIA PLACEHOLDER ============ */
.media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;isolation:isolate;
}
.media::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px);z-index:0}
.media .ph{position:relative;z-index:2;text-align:center;padding:24px;color:var(--text-light-soft)}
.media .ph .tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent);display:block;margin-bottom:8px}
.media .ph .desc{font-size:.9rem}
.media .play{width:74px;height:74px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  box-shadow:0 14px 40px -8px rgba(229,35,26,.65);transition:transform .3s var(--ease)}
.media:hover .play{transform:scale(1.08)}
.media .play svg{width:26px;height:26px;fill:#fff;margin-left:3px}

/* light-mode tile (portfolio) */
.tile{position:relative;width:100%;height:100%;min-height:inherit;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#ccd3e0,#b9c2d4);border:1px solid var(--line-light);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.tile::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 12px,transparent 12px 24px)}
.tile .lbl{position:relative;z-index:2;text-align:center;color:#5b647a;padding:18px}
.tile .lbl .k{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--ink);padding:4px 10px;border-radius:100px;margin-bottom:10px}
.tile .lbl .k.video{background:var(--accent)}
.tile .lbl small{display:block;font-size:.82rem;margin-top:2px}
.tile .play-sm{width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 10px 26px -8px rgba(229,35,26,.6)}
.tile .play-sm svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.tile .meta{position:absolute;left:14px;bottom:14px;z-index:3;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.tile .meta b{display:block;font-size:1rem;font-weight:700}
.tile .meta span{font-size:.78rem;opacity:.85}
.tile .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));z-index:1}

/* ============ CARDS ============ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-grid.g2{grid-template-columns:repeat(2,1fr)}
.card-grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.card-grid,.card-grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.card-grid,.card-grid.g2,.card-grid.g4{grid-template-columns:1fr}}

.card{padding:34px;border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-dark);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(229,35,26,.4)}
.card .ic{width:54px;height:54px;border-radius:14px;background:rgba(229,35,26,.12);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.card .ic svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7}
.card h3{font-size:1.32rem;margin-bottom:10px}
.card p{font-size:.96rem;color:var(--text-light-soft)}

.card-light{padding:34px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line-light);
  box-shadow:0 14px 40px -28px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card-light:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,0,0,.45)}
.card-light h3{font-size:1.28rem;margin-bottom:10px}
.card-light p{font-size:.95rem;color:var(--text-dark-soft)}

/* ============ STATS STRIP ============ */
.stats-strip{background:var(--accent);color:#fff;padding:64px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:36px}}
.stat b{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,6vw,4rem);display:block;line-height:1}
.stat span{font-size:.92rem;opacity:.9;font-weight:500}

/* ============ CTA ============ */
.cta{background:linear-gradient(160deg,var(--ink-2),var(--ink));text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,rgba(229,35,26,.18),transparent 60%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:18px}
.cta p{font-size:1.15rem;color:var(--text-light-soft);max-width:52ch;margin:0 auto 34px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta small{display:block;margin-top:22px;color:var(--text-light-soft);font-size:.86rem}

/* ============ FOOTER ============ */
footer{background:var(--ink);border-top:1px solid var(--line-dark);padding:52px 0 40px}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
.foot .logo{font-size:1.4rem}
.foot p{font-size:.85rem;color:var(--text-light-soft)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{font-size:.88rem;color:var(--text-light-soft);transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--text-light-soft)}

/* ============ ARTIGO (blog) ============ */
.art-hero{padding:90px 0 60px}
.art-hero .cat{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:18px}
.art-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:20ch}
.art-hero .meta{margin-top:20px;font-size:.88rem;color:var(--text-light-soft)}
.art-body{background:var(--paper);color:var(--text-dark);padding:80px 0 90px}
.art-body .prose{max-width:720px;margin:0 auto;font-size:1.06rem;line-height:1.75}
.prose p{margin-bottom:1.4em;color:#2a3247}
.prose h2{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;font-size:2rem;margin:2em 0 .6em;color:var(--text-dark)}
.prose h3{font-size:1.2rem;margin:1.8em 0 .5em;color:var(--text-dark)}
.prose ul,.prose ol{margin:0 0 1.4em 1.3em;color:#2a3247}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--text-dark)}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:1.8em 0;font-size:1.15rem;color:var(--text-dark);font-weight:500}
.prose .art-media{margin:2em 0;border-radius:var(--radius);min-height:320px}
.art-cta{max-width:720px;margin:56px auto 0;padding:34px;border-radius:var(--radius-lg);background:var(--ink);color:var(--text-light);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.art-cta h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.02em}
.art-cta p{font-size:.94rem;color:var(--text-light-soft);margin-top:4px}
.art-back{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--text-light-soft);margin-bottom:26px;transition:color .2s}
.art-back:hover{color:#fff}
.art-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.card-light:hover,.btn:hover{transform:none}
}

/* ============ MOTION PREMIUM (scroll-driven) ============ */
/* fio de progresso */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* nav condensa ao rolar */
header.nav{transition:background .35s var(--ease)}
.nav-inner{transition:height .35s var(--ease)}
header.nav.condensed{background:rgba(10,17,32,.94)}
header.nav.condensed .nav-inner{height:58px}

/* parallax: camadas prontas para transform via JS */
.mega-hero .hero-bg,.mega-title .row,.reel .media{will-change:transform}

/* texto que acende com o scroll (manifesto) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .scroll-paint{
    --paint:0%;
    background:linear-gradient(105deg,var(--text-light) var(--paint),rgba(238,241,246,.16) calc(var(--paint) + 12%));
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
  .scroll-paint .hl{
    background:linear-gradient(105deg,var(--accent) var(--paint),rgba(229,35,26,.22) calc(var(--paint) + 12%));
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* linhas que se desenham nas listas numeradas */
.line-draw{border-top-color:transparent !important;position:relative}
.line-draw::after{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:var(--draw-col,var(--line-light));
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.svc-item.line-draw::after{--draw-col:var(--line-dark)}
.line-draw.drawn::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .nav-inner,header.nav{transition:none}
  .scroll-paint,.scroll-paint .hl{background:none;color:inherit;-webkit-text-fill-color:currentColor}
  .line-draw{border-top-color:var(--line-light) !important}
  .svc-item.line-draw{border-top-color:var(--line-dark) !important}
  .line-draw::after{display:none}
}