:root{
  --bg: #05050A;
  --cyan: #00ffc2;
  --cyan-soft: rgba(0,255,194,0.35);
  --purple: #9b5cff;
  --purple-soft: rgba(155,92,255,0.35);
  --text: #eef2f7;
  --text-dim: #9aa3b2;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(0,255,194,0.25);
  --amber: #d4a24a;
  --gold: #d4af37;
  --gold-soft: rgba(212,175,55,0.12);
  --alert: #c45c4a;
  --radius: 16px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
@property --frame-angle{
  syntax:"<angle>";
  inherits:true;
  initial-value:0deg;
}
html{
  scroll-behavior:smooth;
  overflow-x:clip;
  max-width:100%;
  animation:frame-angle-spin 8s linear infinite;
}
@keyframes frame-angle-spin{
  to{--frame-angle:360deg;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(120px); opacity:0.5;}
.glow-cyan{width:600px; height:600px; background:var(--cyan); top:-200px; left:-150px; opacity:0.18;}
.glow-purple{width:700px; height:700px; background:var(--purple); bottom:-250px; right:-200px; opacity:0.2;}
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

main, header, footer{position:relative; z-index:1;}

/* NAV */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(5,5,10,0.7);
  border-bottom:1px solid rgba(0,255,194,0.12);
  overflow-x:clip;
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  gap:12px;
  min-width:0;
}
.brand{
  font-weight:800; letter-spacing:0.08em; font-size:1.05rem;
  color:var(--text); text-decoration:none; white-space:nowrap;
  min-width:0; flex-shrink:1;
}
.brand-dot{color:var(--cyan);}

.lang-switch{display:flex; align-items:center; gap:8px; font-family:var(--mono); flex-shrink:0;}
.lang-btn{
  background:none; border:none; color:var(--text-dim);
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.05em;
  cursor:pointer; padding:4px 6px; transition:color 0.2s;
}
.lang-btn:hover{color:var(--text);}
.lang-btn.active{color:var(--cyan); text-shadow:0 0 8px var(--cyan-soft);}
.lang-sep{color:rgba(255,255,255,0.15); font-size:0.8rem;}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:600; font-size:0.9rem;
  letter-spacing:0.02em;
  padding:11px 22px; border-radius:10px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:all 0.25s ease; white-space:nowrap;
}
.btn-neon{
  background:linear-gradient(135deg, var(--cyan), #00d9ff);
  color:#031510;
  box-shadow:0 0 18px rgba(0,255,194,0.45), 0 0 40px rgba(0,255,194,0.15);
}
.btn-neon:hover{
  box-shadow:0 0 26px rgba(0,255,194,0.7), 0 0 60px rgba(0,255,194,0.3);
  transform:translateY(-1px);
}
.btn-ghost{
  background:var(--glass);
  color:var(--text);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  border-color:var(--cyan-soft);
  box-shadow:0 0 16px rgba(0,255,194,0.2);
}
.btn-lg{padding:14px 28px; font-size:1rem;}
.btn-block{width:100%; margin-top:auto;}
.nav-cta{padding:9px 18px; font-size:0.85rem; flex-shrink:0; max-width:100%;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* HERO */
.hero{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  align-items:center; gap:40px;
  padding:100px 24px 80px;
  min-height:80vh;
}
.eyebrow{
  display:inline-block; font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.12em; color:var(--cyan); margin-bottom:18px;
  text-transform:uppercase;
}
.hero-title{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:800; line-height:1.1; letter-spacing:-0.02em;
  margin-bottom:22px;
}
.hero-title span{display:block;}
.title-sheen{
  color:var(--text);
  background-image:linear-gradient(
    90deg,
    var(--text) 0%,
    var(--text) 28%,
    color-mix(in srgb, var(--text) 35%, #ffffff) 38%,
    color-mix(in srgb, var(--cyan) 85%, #ffffff) 45%,
    #ffffff 50%,
    color-mix(in srgb, var(--purple) 80%, #ffffff) 55%,
    color-mix(in srgb, var(--text) 35%, #ffffff) 62%,
    var(--text) 72%,
    var(--text) 100%
  );
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:title-steel 8s ease-in-out infinite alternate;
}
@keyframes title-steel{
  0%, 12%{background-position:0% 50%;}
  88%, 100%{background-position:100% 50%;}
}
.text-gradient{
  background:linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  color:var(--text-dim); font-size:1.05rem; max-width:480px; margin-bottom:32px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.hero-visual{display:flex; align-items:center; justify-content:center; position:relative;}
.data-orb{width:100%; max-width:480px; height:auto; animation:float 6s ease-in-out infinite;}
.ring{transform-origin:300px 300px; animation:spin 20s linear infinite;}
.ring-1{animation-duration:18s;}
.ring-2{animation-duration:26s; animation-direction:reverse;}
.ring-3{animation-duration:22s;}
@keyframes spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);}}

/* METRICS */
.metrics{max-width:1200px; margin:0 auto; padding:0 24px 40px;}
.grid-metrics{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
/* Compound selector so these win over .card regardless of source order. */
.card.metric-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:38px 28px; position:relative; overflow:hidden;
}
/* Glowing hairline across the top edge of each panel. */
.metric-card::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 14px var(--cyan-soft);
  opacity:0.7; transition:opacity 0.25s ease, width 0.25s ease;
}
.metric-card:hover::before{opacity:1; width:92%;}
.metric-num{
  font-family:var(--mono); font-size:clamp(2.1rem, 4vw, 2.8rem);
  font-weight:700; line-height:1; letter-spacing:-0.02em;
  color:var(--cyan); text-shadow:0 0 18px var(--cyan-soft);
}
.metric-label{font-size:1.02rem; font-weight:700; letter-spacing:0.01em;}
.metric-sub{color:var(--text-dim); font-size:0.9rem; line-height:1.65; max-width:280px;}

/* SECTIONS */
.section{max-width:1200px; margin:0 auto; padding:100px 24px;}
.section-head{text-align:center; max-width:720px; margin:0 auto 56px;}
.section-head h2{font-size:clamp(1.8rem, 3.5vw, 2.6rem); font-weight:800; letter-spacing:-0.01em; margin-bottom:14px;}
.section-sub{color:var(--text-dim); font-size:1rem;}

/* PORTFOLIO GRID — studio neon showroom */
.grid-portfolio{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  overflow:visible;
}
.card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:32px 28px;
  backdrop-filter:blur(14px);
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--cyan);
  box-shadow:0 0 30px rgba(0,255,194,0.15);
}
.card.portfolio-card{
  display:flex; flex-direction:column; gap:0;
  text-decoration:none; color:var(--text);
  min-height:100%;
  position:relative;
  overflow:visible;
  padding:0 0 28px;
  border-color:var(--glass-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(5,5,10,0.55) 100%);
  transform-origin:center center;
  z-index:1;
}
.card.portfolio-card::before{
  content:""; position:absolute; top:0; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0.55; pointer-events:none;
}
.card.portfolio-card:hover{
  transform:translateY(-8px) scale(1.05);
  z-index:3;
  border-color:var(--cyan);
  box-shadow:0 18px 40px rgba(0,0,0,0.45), 0 0 32px rgba(0,255,194,0.22);
}
.card.portfolio-card:focus-visible{
  outline:1px solid var(--cyan);
  outline-offset:3px;
}
.preview-stage{
  position:relative; height:208px; overflow:hidden;
  margin:12px 12px 0;
  border-radius:12px;
  background:#05050A;
  border:1px solid rgba(0,255,194,0.18);
  pointer-events:none;
}
.preview-stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px;
  background:linear-gradient(180deg, transparent, rgba(5,5,10,0.55));
  pointer-events:none; z-index:1;
}
.preview-scrollshot{
  width:100%; height:auto; display:block;
  transform:translateY(0);
  animation:preview-pan 64s linear infinite alternate;
  will-change:transform;
}
.grid-portfolio .portfolio-card:nth-child(2) .preview-scrollshot{animation-delay:-8s;}
.grid-portfolio .portfolio-card:nth-child(3) .preview-scrollshot{animation-delay:-16s;}
.grid-portfolio .portfolio-card:nth-child(4) .preview-scrollshot{animation-delay:-24s;}
.grid-portfolio .portfolio-card:nth-child(5) .preview-scrollshot{animation-delay:-32s;}
.grid-portfolio .portfolio-card:nth-child(6) .preview-scrollshot{animation-delay:-40s;}
.grid-portfolio .portfolio-card:nth-child(7) .preview-scrollshot{animation-delay:-48s;}
.grid-portfolio .portfolio-card:nth-child(8) .preview-scrollshot{animation-delay:-56s;}
.card.portfolio-card:hover .preview-scrollshot{
  animation-duration:42s;
}
@keyframes preview-pan{
  0%, 12%{transform:translateY(0);}
  88%, 100%{transform:translateY(calc(-100% + 208px));}
}
@media (prefers-reduced-motion:reduce){
  html{animation:none;}
  .preview-scrollshot{animation:none;}
  .title-sheen{
    animation:none;
    background:none;
    -webkit-text-fill-color:unset;
    color:var(--text);
  }
  .audit-acc-panel{transition:none;}
  .audit-acc-chevron{transition:none;}
  .ecg-path{animation:none; stroke-dasharray:none;}
  .card::after,
  .audit-block::after,
  .audit-acc::after,
  .audit-cta-box::after,
  .price-card::after,
  .whatsapp-block::after,
  .modal-panel::after,
  .modal-legal::after,
  .footer-privacy::after,
  .footer-badge::after,
  .btn-ghost::after,
  .audit-input::after{display:none;}
}
.portfolio-body{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 28px 0; flex-grow:1;
}
.portfolio-badge{
  align-self:flex-start;
  font-family:var(--mono); font-size:0.58rem; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--cyan);
  background:rgba(0,255,194,0.08);
  border:1px solid rgba(0,255,194,0.35);
  box-shadow:none;
  padding:5px 10px; border-radius:2px;
}
.portfolio-badge-live{
  background:transparent;
  color:var(--cyan);
  border:1px solid var(--cyan);
  box-shadow:0 0 12px var(--cyan-soft);
}
.portfolio-category{
  font-family:var(--mono); font-size:0.62rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cyan);
}
.portfolio-card h3{
  font-size:1.12rem; font-weight:700; line-height:1.35;
  letter-spacing:-0.01em; margin:0;
}
.portfolio-card p{
  color:var(--text-dim); font-size:0.9rem; line-height:1.65;
  flex-grow:1; margin:0;
}
.portfolio-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px; font-family:var(--mono);
  font-size:0.78rem; font-weight:500; letter-spacing:0.04em;
  color:var(--cyan);
}
.portfolio-cta-arrow{
  display:inline-block;
  transition:transform 0.25s ease;
}
.card.portfolio-card:hover .portfolio-cta-arrow{
  transform:translate(4px, -4px);
}

/* AUDIT TOOL */
.audit{padding-top:20px;}
.audit-block{
  max-width:860px; margin:0 auto;
  padding:48px 40px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(16px);
  box-shadow:0 0 40px rgba(0,255,194,0.08), inset 0 1px 0 rgba(0,255,194,0.12);
}
.audit-head{margin-bottom:32px;}
.audit-form{display:flex; gap:12px; align-items:stretch;}
.audit-input{
  flex:1; min-width:0;
  background:rgba(5,8,10,0.72);
  border:1px solid var(--glass-border);
  color:var(--text);
  font-family:var(--font); font-size:0.95rem;
  padding:14px 16px; border-radius:10px;
  outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.audit-input::placeholder{color:rgba(0,255,194,0.4);}
.audit-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,255,194,0.15);
}
.audit-inline-error{
  color:var(--alert); font-size:0.88rem; margin-top:12px; text-align:center;
}
.audit-loader{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:18px 0 8px;
}
.audit-loader[hidden], .audit-results[hidden], .audit-form[hidden],
.audit-error[hidden], .audit-inline-error[hidden]{display:none;}
.audit-pct{
  font-family:var(--mono); font-size:2.4rem; font-weight:700;
  color:var(--cyan); text-shadow:0 0 18px var(--cyan-soft); letter-spacing:0.04em;
}
.audit-pct-track{
  width:min(320px, 100%); height:4px; border-radius:99px;
  background:rgba(0,255,194,0.15); overflow:hidden;
}
.audit-pct-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--cyan), #00d9ff);
  box-shadow:0 0 12px var(--cyan-soft);
  transition:width 0.25s ease;
}
.audit-log{
  font-family:var(--mono); font-size:0.88rem; color:var(--cyan);
  text-align:center; min-height:1.4em;
}
.audit-error{
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.audit-error p{color:var(--text-dim); max-width:460px; line-height:1.65;}
.audit-results{display:flex; flex-direction:column; gap:28px;}
.audit-tested{
  text-align:center; font-family:var(--mono); font-size:0.78rem;
  color:var(--cyan); word-break:break-all;
}
.audit-gauges{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.audit-gauge{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer;
  padding:8px 6px 10px;
  border-radius:14px;
  border:1px solid transparent;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.audit-ring-wrap{position:relative; width:108px; height:108px;}
.audit-ring-wrap svg{width:100%; height:100%; transform:rotate(-90deg);}
.audit-ring-bg, .audit-ring{
  fill:none; stroke-width:7;
}
.audit-ring-bg{stroke:rgba(0,255,194,0.16);}
.audit-ring{
  stroke:var(--cyan);
  stroke-linecap:round;
  stroke-dasharray:263.89;
  stroke-dashoffset:263.89;
  transition:stroke-dashoffset 0.9s ease, stroke 0.3s ease;
}
.audit-gauge.is-high .audit-ring{stroke:var(--cyan);}
.audit-gauge.is-mid .audit-ring{stroke:var(--amber);}
.audit-gauge.is-low .audit-ring{stroke:var(--alert);}
.audit-score{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.35rem; font-weight:700; color:var(--cyan);
}
.audit-gauge.is-high .audit-score{color:var(--cyan);}
.audit-gauge.is-mid .audit-score{color:var(--amber);}
.audit-gauge.is-low .audit-score{color:var(--alert);}
.audit-gauge-label{
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-dim); text-align:center;
}
.audit-gauge:hover,
.audit-gauge:focus-visible{
  border-color:rgba(0,255,194,0.35);
  background:rgba(0,255,194,0.04);
  outline:none;
}
.audit-gauge.is-open{
  border-color:var(--cyan);
  box-shadow:0 0 18px rgba(0,255,194,0.18);
  background:rgba(0,255,194,0.06);
}
.audit-gauge.is-open .audit-gauge-label{color:var(--cyan);}
.audit-accordions{
  display:flex; flex-direction:column; gap:10px;
}
.audit-acc{
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(5,8,10,0.55);
  overflow:visible;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.audit-acc.is-open{
  border-color:rgba(0,255,194,0.45);
  box-shadow:0 0 20px rgba(0,255,194,0.12);
}
.audit-acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font); font-size:0.92rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; text-align:left;
  color:var(--text);
  transition:color 0.2s ease;
}
.audit-acc-trigger:hover,
.audit-acc-trigger:focus-visible{
  color:var(--cyan); outline:none;
}
.audit-acc.is-open .audit-acc-trigger{color:var(--cyan);}
.audit-acc-chevron{
  width:10px; height:10px; flex-shrink:0;
  border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(45deg); opacity:0.7;
  transition:transform 0.3s ease, opacity 0.2s ease;
}
.audit-acc.is-open .audit-acc-chevron{
  transform:rotate(225deg); opacity:1;
}
.audit-acc-panel{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows 0.38s ease;
}
.audit-acc.is-open .audit-acc-panel{grid-template-rows:1fr;}
.audit-acc-panel-inner{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.audit-acc-fact{
  margin:0;
  padding:0 18px;
  color:var(--text-dim); font-size:0.95rem; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:1.7;
}
.audit-acc-fact:last-child{padding-bottom:18px;}
.audit-acc-fact strong{
  display:block;
  margin-bottom:5px;
  color:var(--cyan);
  font-family:var(--mono); font-size:0.72rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
}
.audit-acc-fact span{display:block;}
.audit-cta-box{
  padding:24px 22px;
  background:rgba(5,8,10,0.55);
  border:1px solid var(--glass-border);
  border-radius:14px;
  text-align:center;
}
.audit-cta-box p{color:var(--text-dim); font-size:0.95rem; line-height:1.7; margin-bottom:18px;}
.audit-wa{width:100%;}
.audit-again{align-self:center;}

/* PRICING */
.grid-pricing{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; align-items:stretch;
}
.price-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:28px 18px;
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover{transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 0 24px rgba(0,255,194,0.15);}
.price-card h3{font-size:1.05rem; font-weight:700; margin-bottom:4px;}
.price-tag-sub{font-family:var(--mono); font-size:0.75rem; color:var(--text-dim); margin-bottom:18px;}
.price-amount{font-size:1.85rem; font-weight:800; color:var(--cyan); margin-bottom:16px; text-shadow:0 0 14px var(--cyan-soft);}
.price-desc{color:var(--text-dim); font-size:0.88rem; margin-bottom:24px; flex-grow:1;}

.price-card-featured{
  border:1px solid var(--cyan);
  box-shadow:0 0 40px rgba(0,255,194,0.35), 0 0 90px rgba(155,92,255,0.15);
  transform:scale(1.03);
  isolation:isolate;
  z-index:1;
}
.price-card-featured:hover{transform:scale(1.03) translateY(-4px);}
.price-card-featured .price-amount{
  background:linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.featured-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--cyan), var(--purple));
  color:#05050A; font-family:var(--mono); font-size:0.7rem; font-weight:700;
  letter-spacing:0.05em; padding:5px 14px; border-radius:20px;
  white-space:nowrap;
  z-index:2;
}

/* Traveling cyan highlight on every framed panel, synced via --frame-angle. */
.card,
.audit-block,
.audit-acc,
.audit-cta-box,
.price-card,
.whatsapp-block,
.modal-panel,
.modal-legal,
.footer-privacy,
.footer-badge,
.btn-ghost,
.audit-input{
  position:relative;
}
.card::after,
.audit-block::after,
.audit-acc::after,
.audit-cta-box::after,
.price-card::after,
.whatsapp-block::after,
.modal-panel::after,
.modal-legal::after,
.footer-privacy::after,
.footer-badge::after,
.btn-ghost::after,
.audit-input::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  z-index:4;
  background:conic-gradient(
    from var(--frame-angle),
    transparent 0deg,
    transparent 255deg,
    rgba(0,255,194,0.12) 285deg,
    var(--cyan) 318deg,
    #e8fff8 336deg,
    var(--cyan) 348deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.price-card-featured::after,
.whatsapp-block::after{
  padding:1.5px;
  background:conic-gradient(
    from var(--frame-angle),
    transparent 0deg,
    transparent 220deg,
    rgba(0,255,194,0.2) 255deg,
    var(--cyan) 300deg,
    #ffffff 328deg,
    var(--cyan) 348deg,
    transparent 360deg
  );
}
.price-card-featured::after{
  z-index:-1;
}

/* CONTACT */
.contact{text-align:center;}
.contact-block{max-width:640px; margin:0 auto;}
.whatsapp-block{
  display:flex; align-items:center; gap:20px; justify-content:center;
  margin-top:40px; padding:28px 40px;
  background:linear-gradient(135deg, rgba(0,255,194,0.1), rgba(155,92,255,0.08));
  border:1px solid var(--cyan);
  border-radius:20px;
  text-decoration:none; color:var(--text);
  box-shadow:0 0 40px rgba(0,255,194,0.25);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-block:hover{
  transform:translateY(-3px);
  box-shadow:0 0 60px rgba(0,255,194,0.4);
}
.wa-icon{color:var(--cyan); flex-shrink:0;}
.wa-text{display:flex; flex-direction:column; text-align:left; gap:4px;}
.wa-text strong{font-size:1.2rem;}
.wa-text span{color:var(--text-dim); font-size:0.88rem;}

/* FLOATING WHATSAPP */
.floating-wa{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), #00d9ff);
  color:#031510;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(0,255,194,0.55), 0 0 50px rgba(0,255,194,0.25);
  animation:pulse-glow 2.4s ease-in-out infinite;
  text-decoration:none;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 20px rgba(0,255,194,0.55), 0 0 50px rgba(0,255,194,0.25);}
  50%{box-shadow:0 0 30px rgba(0,255,194,0.8), 0 0 70px rgba(0,255,194,0.4);}
}

/* PRIVACY MODAL */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,5,10,0.75);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
.modal-panel{
  position:relative;
  max-width:640px; width:100%; max-height:80vh; overflow-y:auto;
  background:rgba(10,12,20,0.75);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:40px 36px;
  backdrop-filter:blur(24px);
  box-shadow:0 0 60px rgba(0,255,194,0.15), 0 0 120px rgba(155,92,255,0.12);
  transform:translateY(12px);
  transition:transform 0.25s ease;
}
.modal-overlay.open .modal-panel{transform:translateY(0);}
.modal-panel h3{font-size:1.4rem; font-weight:800; margin-bottom:20px; padding-right:32px;}
.modal-panel h4{font-size:1rem; font-weight:700; margin:20px 0 8px; color:var(--cyan);}
.modal-panel h4:first-of-type{margin-top:0;}
.modal-panel p{color:var(--text-dim); font-size:0.92rem; margin-bottom:12px; line-height:1.6;}
.modal-panel ul{margin:0 0 12px 20px; color:var(--text-dim); font-size:0.92rem; line-height:1.6;}
.modal-panel li{margin-bottom:6px;}
.modal-panel a{color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--cyan-soft);}
.modal-panel a:hover{border-bottom-color:var(--cyan); text-shadow:0 0 10px var(--cyan-soft);}
.modal-close{
  position:absolute; top:20px; right:20px;
  width:32px; height:32px; border-radius:50%;
  background:var(--glass); border:1px solid rgba(255,255,255,0.15);
  color:var(--text); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.2s ease, color 0.2s ease;
}
.modal-close:hover{border-color:var(--cyan); color:var(--cyan);}
.modal-legal{
  margin:0 0 22px;
  padding:16px 18px 14px;
  border:1px solid var(--glass-border);
  border-radius:14px;
  background:rgba(0,255,194,0.04);
}
.modal-legal-kicker{
  margin:0 0 12px;
  font-family:var(--mono); font-size:0.72rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan);
}
.modal-legal-list{display:flex; flex-direction:column; gap:10px; margin:0;}
.modal-legal-list > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,0.06);
}
.modal-legal-list > div:first-child{padding-top:0; border-top:0;}
.modal-legal-list dt{
  margin:0; color:var(--text-dim);
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase;
}
.modal-legal-list dd{
  margin:0; color:var(--text);
  font-size:0.92rem; font-weight:600; text-align:right;
  word-break:break-word;
}
.modal-actions{display:flex; justify-content:flex-end; margin-top:26px;}

/* SEO CONTENT */
.seo-section{max-width:1200px; margin:0 auto; padding:0 24px 100px;}
.ecg-wrap{
  max-width:720px; margin:-8px auto 8px;
  padding:0 24px;
  height:44px;
  overflow:hidden;
}
.ecg-svg{width:100%; height:44px; display:block;}
.ecg-base{
  stroke:rgba(0,255,194,0.18);
  stroke-width:1.2;
}
.ecg-path{
  stroke:var(--cyan);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--cyan));
  stroke-dasharray:90 710;
  animation:ecg-run 2.35s linear infinite;
}
@keyframes ecg-run{
  to{stroke-dashoffset:-800;}
}
.seo-inner{
  max-width:900px; margin:0 auto; padding-top:48px;
  position:relative;
}
.seo-title{
  text-align:center;
  font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:800;
  letter-spacing:-0.01em; line-height:1.25; margin-bottom:16px;
}
.seo-sub{
  text-align:center; color:var(--text-dim);
  font-size:1.02rem; line-height:1.6;
  max-width:560px; margin:0 auto 46px;
}
.seo-body{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:26px 44px;
}
.seo-body p{color:var(--text-dim); font-size:0.96rem; line-height:1.9; overflow-wrap:anywhere;}

/* FOOTER */
.footer{border-top:1px solid rgba(255,255,255,0.08); padding:28px 24px;}
.footer-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-brand{font-size:0.9rem;}
.footer-copy{color:var(--text-dim); font-size:0.82rem;}
.footer-privacy{
  -webkit-appearance:none; appearance:none; font-family:inherit;
  color:var(--text-dim); font-size:0.82rem; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:7px 14px;
  transition:color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer-privacy:hover,
.footer-privacy:focus-visible{
  color:var(--cyan); border-color:var(--cyan-soft);
  box-shadow:0 0 14px rgba(0,255,194,0.16); outline:none;
}
.footer-legal{
  max-width:1200px; margin:22px auto 0;
  padding-top:20px; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:center;
}
/* Official "Livro de Reclamacoes" badge - reads as a chip, not a marketing button. */
.footer-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:999px;
  background:var(--glass); border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  color:var(--text-dim); font-size:0.76rem; letter-spacing:0.02em;
  text-decoration:none; text-align:center;
  transition:border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.footer-badge:hover{border-color:var(--cyan-soft); color:var(--cyan); box-shadow:0 0 16px rgba(0,255,194,0.2);}
.footer-badge svg{flex-shrink:0;}

/* RESPONSIVE */
@media (max-width:1100px){
  .grid-pricing{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr; text-align:center; padding-top:60px;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .card.metric-card{padding:30px 20px;}
  .hero-visual{order:-1; max-width:320px; margin:0 auto;}
  .grid-portfolio{grid-template-columns:repeat(2, 1fr); gap:32px;}
  .grid-pricing{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .price-card-featured{transform:none;}
  .price-card-featured:hover{transform:translateY(-4px);}
  .audit-gauges{grid-template-columns:repeat(2, 1fr);}
  .audit-acc-trigger{font-size:0.86rem; padding:16px; min-height:48px;}
  .audit-acc-panel-inner{gap:12px;}
  .audit-acc-fact{padding:0 16px; font-size:0.92rem; line-height:1.65;}
  .audit-acc-fact:last-child{padding-bottom:16px;}
}

@media (max-width:640px){
  .nav-inner{padding:10px 12px; gap:6px;}
  .brand{font-size:0.78rem; letter-spacing:0.03em;}
  .nav-cta{
    padding:8px 10px; font-size:0.72rem;
    white-space:normal; line-height:1.15; text-align:center;
    max-width:38vw;
  }
  .lang-btn{font-size:0.7rem; padding:2px 2px;}
  .lang-sep{font-size:0.7rem;}
  .lang-switch{gap:3px;}
  .grid-portfolio{grid-template-columns:1fr; gap:32px;}
  .grid-metrics{grid-template-columns:1fr;}
  .metrics{padding:0 20px 24px;}
  .grid-pricing{grid-template-columns:1fr;}
  .hero{padding:48px 20px 60px;}
  .section{padding:64px 20px;}
  .whatsapp-block{flex-direction:column; padding:28px 24px; gap:14px;}
  .wa-text{text-align:center; align-items:center;}
  .footer-inner{flex-direction:column; text-align:center;}
  .floating-wa{width:54px; height:54px; bottom:18px; right:18px;}
  .modal-panel{padding:32px 22px; max-height:85vh;}
  .modal-legal{padding:14px 14px 12px;}
  .modal-legal-list > div{flex-wrap:wrap; gap:6px 12px;}
  .modal-legal-list dd{text-align:left;}
  .seo-section{padding:0 20px 64px;}
  .seo-inner{padding-top:36px;}
  .ecg-wrap{padding:0 20px; margin-top:0;}
  .seo-sub{margin-bottom:32px;}
  .audit-block{padding:32px 20px;}
  .audit-form{flex-direction:column;}
  .audit-acc-fact{font-size:0.94rem; line-height:1.7;}
}

@media (max-width:420px){
  .nav-inner{gap:5px; padding:10px 10px;}
  .brand-full{display:none;}
  .brand{font-size:0.86rem; letter-spacing:0.06em;}
  .nav-cta{padding:7px 8px; font-size:0.68rem; max-width:40vw;}
  .lang-btn{font-size:0.66rem; padding:2px 1px;}
  .lang-sep{font-size:0.66rem;}
  .lang-switch{gap:2px;}
}