.skip-link{position:absolute;top:-100px;left:0;background:var(--brand);color:#fff;padding:8px 16px;z-index:9999;border-radius:0 0 8px 0;font-size:14px;transition:top .2s}
.skip-link:focus{top:0}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:    #593178;   /* OpenCon purple (logo "Open") */
  --brand-btn:#17A0AF;   /* OpenCon teal (logo "CON") — accent */
  --brand-50: #7C5DA1;   /* purple accent / focus */

  --bg:     #FFFFFF;
  --border: #DCE2E4;   /* soft cool gray (cases) */

  --section-py: 100px;
  --t1:#171717;--t2:#3D3D3D;--t3:#5B5B5B;--t4:#6E6E6E;  /* text scale */
  --f:'Poppins',sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--f);background:var(--bg);color:var(--t1);overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
button{font-family:var(--f);cursor:pointer;border:none}

/* ========================
   HERO
   ======================== */
.hero{min-height:85vh;padding:0;display:flex;align-items:center;background:var(--bg);position:relative;overflow:visible}
.hero-in{max-width:1440px;width:100%;margin:0 auto;padding:48px 120px;display:grid;grid-template-columns:55fr 45fr;align-items:center;gap:80px;position:relative;z-index:5}
.hero-logo{display:block;margin-bottom:32px}
.hero-logo img{display:block}
.hero-badge{display:block;width:fit-content;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:var(--brand);margin-bottom:20px;letter-spacing:.14em;text-transform:uppercase}
.hero-h1{font-size:44px;font-weight:600;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px;color:var(--t1)}
.hero-h1 .accent{color:var(--brand-btn)}
.hero-sub{font-size:15px;color:var(--t2);line-height:1.7;max-width:480px;margin-bottom:32px}
.line-wrap{display:block;overflow:hidden}
.line-inner{display:block;transform:translateY(110%);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.line-inner.revealed{transform:translateY(0);opacity:1}

/* Hero right mockup */
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px}
.hero-phone-scene{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:640px}
.hero-phone-wrap{position:relative;z-index:3;flex-shrink:0;transform:translateY(32px)}
.hero-phone-scene::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:680px;height:600px;background:radial-gradient(ellipse 100% 100% at 50% 50%,rgba(89,49,120,.14) 0%,rgba(89,49,120,.04) 50%,transparent 75%);filter:blur(72px);z-index:1;pointer-events:none}
.hero-glow-lime{position:absolute;bottom:-80px;left:-120px;width:620px;height:320px;background:radial-gradient(ellipse,rgba(23,160,175,.16) 0%,transparent 70%);filter:blur(80px);pointer-events:none;z-index:0}
.hero-glow-mid{position:absolute;top:-20px;right:-100px;width:520px;height:280px;background:radial-gradient(ellipse,rgba(124,93,161,.14) 0%,transparent 70%);filter:blur(70px);pointer-events:none;z-index:0}
.hero-glow-teal{position:absolute;top:-40px;left:-60px;width:480px;height:260px;background:radial-gradient(ellipse,rgba(23,160,175,.1) 0%,transparent 70%);filter:blur(72px);pointer-events:none;z-index:0}
.hero-phone-img{height:600px;width:auto;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.hero-float-card{position:absolute;background:rgba(255,255,255,0.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(235,235,235,0.9);border-radius:16px;padding:14px 18px;box-shadow:0 4px 24px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;z-index:4;min-width:180px}
.hero-float-card .hfc-icon{width:38px;height:38px;border-radius:10px;background:#DCF0F3;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-float-card .hfc-text strong{display:block;font-size:13px;font-weight:600;color:var(--brand-btn);line-height:1.3}
.hero-float-card .hfc-text span{display:block;font-size:11px;color:#1a1a1a;margin-top:2px}
.hfc-tl{top:242px;left:0}
.hfc-tr{top:102px;right:0}
.hfc-br{bottom:48px;right:10px}
.hero-gradient{position:absolute;inset:0;z-index:2;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1726 871' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-11.185 -49.121 97.361 -22.282 974.85 491.21)'><stop stop-color='rgba(247,247,247,0.05)' offset='0'/><stop stop-color='rgba(247,247,247,0.1)' offset='0.39787'/><stop stop-color='rgba(255,255,255,1)' offset='0.75962'/><stop stop-color='rgba(255,255,255,0.9)' offset='1'/></radialGradient></defs></svg>")}

/* ========================
   SECTION COMMONS
   ======================== */
.sec-title{font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--t1)}
.sec-sub{font-size:17px;color:var(--t3);line-height:1.7;margin-top:16px}


/* ========================
   SESSION 3 FEATURE CARDS (4)
   ======================== */
/* SUMÁRIO */
.sumario{background:#fff;padding:var(--section-py) 0}
.sum-in{max-width:1440px;width:100%;margin:0 auto;padding:0 120px}
.sum-header{text-align:center;margin-bottom:80px}
.sum-title{font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--t1)}
.sum-desc{font-size:15px;color:var(--t3);line-height:1.8}
.sum-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sum-card{display:flex;flex-direction:column;gap:20px;text-decoration:none;color:inherit;cursor:pointer}
.sum-card-mock{border-radius:16px;overflow:hidden;aspect-ratio:16/10}
.sum-card-mock img{width:100%;height:100%;object-fit:cover;display:block}
.sum-card-label{font-size:16px;font-weight:600;color:var(--t1)}
.sum-card-desc{font-size:14px;color:var(--t3);line-height:1.7;margin-top:-12px}

.feat-cards{padding:var(--section-py) 0;background:#fff}
#aplicativo{background:#1A0D2E}
#plataforma{background:#0A2028}
#website{background:#0D0F2E}
#emitazap{background:#0B2A1E}
/* EmitaZap — chat (imagem transparente) + logo no título */
.fc-mock-chat{overflow:hidden;border-radius:0;display:flex;align-items:center;justify-content:center}
.fc-mock-chat img{width:80%;height:auto;display:block}
.ez-title{position:relative;display:inline-flex;align-items:center;gap:0}
.ez-text{display:flex;flex-direction:column}
.ez-logo{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:50px;height:130px;width:auto;display:block}
@media(max-width:768px){
  .ez-title{display:flex;flex-direction:column;gap:10px}
  .ez-logo{position:static;transform:none;margin:0;height:84px}
}
#aplicativo .sec-title,#plataforma .sec-title,#website .sec-title,#emitazap .sec-title{color:#fff}
#aplicativo .sec-sub,#plataforma .sec-sub,#website .sec-sub,#emitazap .sec-sub{color:rgba(255,255,255,.55)}
#aplicativo .fc-title,#plataforma .fc-title,#website .fc-title,#emitazap .fc-title{color:#fff}
#aplicativo .fc-text,#plataforma .fc-text,#website .fc-text,#emitazap .fc-text{color:rgba(255,255,255,.6)}
.fc-in{max-width:1440px;width:100%;margin:0 auto;padding:0 120px}
.fc-head{text-align:center;margin-bottom:80px}
.fc-head .sec-title{max-width:700px;margin:0 auto}

.fc-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:160px}
.fc-row:last-of-type{margin-bottom:0}
.fc-outros{margin-top:160px}
.fc-image{order:2}
.fc-content{display:flex;flex-direction:column;gap:16px;order:1}
.fc-row.rev .fc-image{order:1}
.fc-row.rev .fc-content{order:2}
.fc-title{font-size:34px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--t1)}
.fc-badge{display:inline-block;vertical-align:middle;margin-left:16px;padding:5px 10px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-btn);background:#DCF0F3;border:1px solid rgba(23,160,175,.45);border-radius:6px;white-space:nowrap}
.fc-text{font-size:16px;color:var(--t2);line-height:1.8}
.fc-image{display:flex;align-items:center;justify-content:center}

/* Feature card mockups */
.fc-mock{width:100%;aspect-ratio:16/10;background:rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.fc-mock-app{background:rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;padding-top:24px}
.fc-mock-app .fc-phone{width:55%;flex-shrink:0;background:transparent;border-radius:0;overflow:hidden}
.fc-mock-desktop{position:relative}
.fc-mock-desktop img{position:absolute;left:7%;top:8%;width:150%;border-radius:12px}
.fc-mock-desktop img.fit{width:112%;}
.fc-mock-desktop img.anchor-left{left:auto;right:7%;}
#plataforma .fc-mock-desktop img{width:138%}
.fc-mock-app .fc-phone img{width:100%;display:block}

/* ========================
   SESSION 4 PROVA SOCIAL
   ======================== */
.social-proof{padding:var(--section-py) 0;background:var(--bg)}
.sp-in{max-width:1440px;margin:0 auto;padding:0 120px}
.sp-head{text-align:center;margin-bottom:80px}
.sp-head .sec-title{white-space:nowrap}
.sp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.sp-card{margin:0;background:#fff;border:1px solid var(--border);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:0;box-shadow:0 4px 24px rgba(23,160,175,.08)}
.sp-result{margin-bottom:32px;display:flex;align-items:center;gap:16px}
.sp-result-num{font-size:36px;font-weight:700;color:var(--brand-btn);letter-spacing:-.03em;line-height:1;flex-shrink:0}
.sp-result-text{font-size:13px;color:var(--t3);line-height:1.4;max-width:220px}
.sp-quote{margin:0 0 32px}
.sp-quote p{font-size:16px;font-weight:400;color:var(--t2);line-height:1.7;font-style:italic;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.sp-divider{height:1px;background:var(--border);margin-bottom:24px}
.sp-author{display:flex;align-items:center;gap:12px}
.sp-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.sp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sp-avatar img.zoom-110{transform:scale(1.1)}
.sp-name{font-size:13px;font-weight:600;color:var(--t1)}
.sp-role{font-size:11px;color:var(--t4);margin-top:1px}

/* ========================
   SESSION 5 CTA
   ======================== */
.cta-final{padding:var(--section-py) 120px;background:#0C5A66;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 65%);pointer-events:none}
.cta-final-in{max-width:760px;margin:0 auto;position:relative;z-index:1}
.cta-final-sub{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px}
.cta-final-title{font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:#fff;margin-bottom:24px}
.cta-final-text{font-size:17px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:44px;max-width:600px;margin-left:auto;margin-right:auto}

/* REVEAL */
/* Reveal animations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal-scale.in{opacity:1;transform:scale(1)}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-right.in{opacity:1;transform:translateX(0)}
.hfc-icon svg{width:20px;height:20px;stroke:var(--brand-btn);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   RESPONSIVE  —  desktop rules above are untouched; the queries
   below only override on smaller viewports (mobile-first safe).
   Breakpoints: 1024 (tablet) · 768 (mobile) · 480 (small phone)
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width:1024px){
  :root{--section-py:72px}
  .hero-in,.sum-in,.fc-in,.sp-in{padding-left:48px;padding-right:48px}
  .cta-final{padding-left:48px;padding-right:48px}
  .hero-in{gap:40px}
  .hero-h1{font-size:38px}
  .hero-phone-img{height:480px}
  .hero-phone-scene{height:540px}
  .hero-right{min-height:440px}
  .sec-title,.sum-title,.cta-final-title{font-size:34px}
  .fc-title{font-size:28px}
  .fc-row{gap:48px;margin-bottom:100px}
  .fc-head,.sum-header,.sp-head{margin-bottom:56px}
  .fc-outros{margin-top:100px}
  .sp-grid{gap:24px}
  .sp-card{padding:32px}
  .sp-head .sec-title{white-space:normal}
}

/* ---- Mobile (≤768px) ---- */
@media (max-width:768px){
  :root{--section-py:56px}
  .sum-in,.fc-in,.sp-in{padding-left:24px;padding-right:24px}
  .cta-final{padding-left:24px;padding-right:24px}

  /* Hero stacks: text first, phone below */
  .hero{min-height:auto}
  .hero-in{grid-template-columns:1fr;padding:32px 24px 16px;gap:32px}
  .hero-h1{font-size:30px}
  .hero-sub{font-size:15px;max-width:none}
  .hero-right{min-height:auto}
  .hero-phone-scene{height:auto;padding:24px 0}
  .hero-phone-img{height:400px}
  /* Floating cards overlap awkwardly on narrow screens — hide on mobile */
  .hero-float-card{display:none}

  /* Section headings */
  .sec-title,.sum-title,.cta-final-title{font-size:26px}
  .sec-sub,.cta-final-text{font-size:15px}
  .sum-header,.fc-head,.sp-head{margin-bottom:40px}

  /* Summary deliverables: single column */
  .sum-cards{grid-template-columns:1fr;gap:32px}

  /* Feature rows: stack, image always below text */
  .fc-row{grid-template-columns:1fr;gap:28px;margin-bottom:64px}
  .fc-row .fc-content,.fc-row.rev .fc-content{order:1}
  .fc-row .fc-image,.fc-row.rev .fc-image{order:2}
  .fc-title{font-size:23px}
  .fc-text{font-size:15px}
  .fc-outros{margin-top:64px}

  /* Social proof: single column */
  .sp-grid{grid-template-columns:1fr;gap:24px}
  .sp-card{padding:28px}
  .sp-result-num{font-size:30px}

  /* CTA */
  .cta-final-text{margin-bottom:32px}
}

/* ---- Small phone (≤480px) ---- */
@media (max-width:480px){
  .sum-in,.fc-in,.sp-in{padding-left:16px;padding-right:16px}
  .cta-final{padding-left:16px;padding-right:16px}
  .hero-in{padding:24px 16px 8px}
  .hero-h1{font-size:26px}
  .hero-phone-img{height:330px}
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Visible keyboard focus (mouse clicks stay clean via :focus-visible) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.sum-card:focus-visible{
  outline:3px solid var(--brand-50);
  outline-offset:3px;
  border-radius:6px;
}

/* No-JS fallback lives in a <noscript><style> block in index.html
   (CSP blocks inline scripts but allows inline styles), so reveal
   animations never leave content invisible when JS is disabled. */

/* Respect users who prefer reduced motion: no transitions, no parallax drift,
   no smooth scroll — content appears instantly in place. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.line-inner{opacity:1!important;transform:none!important}
  #hero-badge{opacity:1!important;transform:none!important}
  .hero-float-card{transform:none!important}
}