* Mobile-first. Custom properties define the design token system.
 * Critical above-the-fold styles are inlined in index.html.
 * Palette: Wingo Red / Green / Violet on neutral white-violet ground.
 */


section{padding:var(--space-12) 0;scroll-margin-top:80px}
.section-title{font-size:var(--fs-2xl);font-weight:800;margin:0 0 var(--space-3);line-height:1.15;letter-spacing:-0.01em}
.section-title em{color:var(--c-violet-dark);font-style:normal}
.section-lead{font-size:var(--fs-lg);color:var(--c-text-muted);margin:0 0 var(--space-8);max-width:50ch}


.c-r{color:var(--c-red);font-weight:700}
.c-g{color:var(--c-green);font-weight:700}
.c-v{color:var(--c-violet);font-weight:700}


.age-gate{position:fixed;inset:0;background:rgba(15,10,31,.78);backdrop-filter:blur(6px);z-index:200;display:grid;place-items:center;padding:var(--space-4)}
.age-gate[hidden]{display:none}
.age-gate-card{background:var(--c-surface);color:var(--c-text);max-width:480px;width:100%;border-radius:var(--r-lg);padding:var(--space-8);box-shadow:var(--shadow-lg);text-align:center}
.age-gate-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--c-red-soft);color:var(--c-red-dark);font-weight:900;font-size:var(--fs-xl);margin-bottom:var(--space-4);border:3px solid var(--c-red)}
.age-gate-card h2{margin:0 0 var(--space-3);font-size:var(--fs-2xl);font-weight:800}
.age-gate-card p{margin:0 0 var(--space-3);color:var(--c-text-muted)}
.age-gate-confirm{color:var(--c-text)!important;margin:var(--space-4) 0!important}
.age-gate-actions{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-6) 0 var(--space-4)}
.age-gate-note{font-size:var(--fs-xs)!important;color:var(--c-text-muted);line-height:1.5}
@media (min-width:560px){
  .age-gate-actions{flex-direction:row;justify-content:center}
  .age-gate-actions .btn{flex:1;max-width:200px}
}


.modes{background:var(--c-surface)}
.mode-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.mode{position:relative;padding:var(--space-6);border-radius:var(--r-lg);border:1px solid var(--c-border);background:var(--c-surface);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform var(--t-norm) var(--ease-out),box-shadow var(--t-norm) var(--ease-out)}
.mode:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mode::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--c-red) 0%,var(--c-red) 33%,var(--c-green) 33%,var(--c-green) 66%,var(--c-violet) 66%,var(--c-violet) 100%)}
.mode-tag{display:inline-block;padding:4px 10px;background:var(--c-violet-soft);color:var(--c-violet-dark);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:var(--space-3)}
.mode-quick .mode-tag{background:var(--c-red-soft);color:var(--c-red-dark)}
.mode-standard .mode-tag{background:var(--c-green-soft);color:var(--c-green-dark)}
.mode-deep .mode-tag{background:var(--c-violet-soft);color:var(--c-violet-dark)}
.mode h3{margin:0 0 var(--space-2);font-size:var(--fs-xl);font-weight:700}
.mode p{margin:0 0 var(--space-4);color:var(--c-text-muted);line-height:1.55}
.mode-colors{display:flex;gap:8px;align-items:center}
.mode-colors .color-dot{width:18px;height:18px}


.features{background:var(--c-cream)}
.feature-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.feature{background:var(--c-surface);padding:var(--space-6);border-radius:var(--r-lg);border:1px solid var(--c-border);box-shadow:var(--shadow-sm);transition:transform var(--t-norm) var(--ease-out),box-shadow var(--t-norm) var(--ease-out)}
.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.feature-icon{width:48px;height:48px;display:grid;place-items:center;background:var(--c-violet-soft);border-radius:var(--r-md);font-size:24px;margin-bottom:var(--space-3)}
.feature h3{margin:0 0 var(--space-2);font-size:var(--fs-xl);font-weight:700}
.feature p{margin:0;color:var(--c-text-muted);line-height:1.55}


.how{background:var(--c-surface);background:linear-gradient(180deg,var(--c-cream) 0%,var(--c-surface) 100%)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.step{position:relative;padding:var(--space-6);background:var(--c-surface);border-radius:var(--r-lg);border:1px solid var(--c-border)}
.step-num{position:absolute;top:-12px;left:-12px;width:48px;height:48px;background:var(--c-violet);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--fs-lg);box-shadow:var(--shadow-violet)}
.step h3{margin:var(--space-2) 0 var(--space-2);font-size:var(--fs-xl);font-weight:700}
.step p{margin:0;color:var(--c-text-muted)}


.cta{background:var(--c-ink);color:#fff;padding:var(--space-16) 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:0;right:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--c-violet) 0%,transparent 70%);opacity:0.35;pointer-events:none}
.cta::after{content:"";position:absolute;bottom:-100px;left:-50px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--c-green) 0%,transparent 70%);opacity:0.18;pointer-events:none}
.cta .section-title,.cta h2{color:#fff;margin:0 0 var(--space-4);font-size:var(--fs-2xl);font-weight:800;line-height:1.15;position:relative}
.cta-inner{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start;position:relative;z-index:1}
.cta-copy p{font-size:var(--fs-lg);color:#d4d0e8;margin:0 0 var(--space-6)}
.cta-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);color:#d4d0e8}
.cta-bullets li{font-size:var(--fs-base)}

.cta-form{background:var(--c-surface);color:var(--c-text);padding:var(--space-6);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.field{margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:var(--fs-sm);color:var(--c-text)}
.field input[type="text"],.field input[type="tel"],.field select{font:inherit;padding:12px 14px;border:1.5px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);min-height:48px;width:100%;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.field input[type="text"]:focus,.field input[type="tel"]:focus,.field select:focus{outline:0;border-color:var(--c-violet);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.field input:invalid:not(:placeholder-shown){border-color:var(--c-red)}
.field small{color:var(--c-text-muted);font-size:var(--fs-xs)}
.field-check{flex-direction:row;align-items:flex-start;gap:var(--space-2)}
.check{display:flex;gap:var(--space-2);align-items:flex-start;cursor:pointer;font-size:var(--fs-sm);line-height:1.45;color:var(--c-text)}
.check input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--c-violet)}
.btn-block{width:100%;margin-top:var(--space-2)}
.form-status{margin:var(--space-3) 0 0;font-size:var(--fs-sm);min-height:1.2em}
.form-status.ok{color:var(--c-success);font-weight:600}
.form-status.err{color:var(--c-red);font-weight:600}
.form-fineprint{color:var(--c-text-muted);font-size:var(--fs-xs);margin:var(--space-3) 0 0;line-height:1.5}


.responsible{background:var(--c-surface)}
.resp-card{background:linear-gradient(135deg,var(--c-violet-soft) 0%,var(--c-cream) 100%);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.resp-card .section-title{margin-bottom:var(--space-6)}
.resp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.resp-list li{padding:var(--space-4) var(--space-6);background:var(--c-surface);border-radius:var(--r-md);border-left:4px solid var(--c-violet);font-size:var(--fs-base);line-height:1.55;color:var(--c-text-muted)}
.resp-list li strong{color:var(--c-text)}
.resp-list li:nth-child(1){border-left-color:var(--c-red)}
.resp-list li:nth-child(2){border-left-color:var(--c-violet)}
.resp-list li:nth-child(3){border-left-color:var(--c-green)}
.resp-list li:nth-child(4){border-left-color:var(--c-violet-dark)}


.faq{background:var(--c-cream)}
.faq-item{border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);margin-bottom:var(--space-3);overflow:hidden}
.faq-item summary{padding:var(--space-4) var(--space-6);font-weight:600;cursor:pointer;list-style:none;font-size:var(--fs-base);position:relative;padding-right:var(--space-12)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:var(--space-6);top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:var(--c-violet);transition:transform var(--t-fast) var(--ease-out)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0;padding:0 var(--space-6) var(--space-6);color:var(--c-text-muted);line-height:1.6}
.faq-item p strong{color:var(--c-text)}


footer{background:var(--c-ink-deep);color:#d4d0e8;padding:var(--space-12) 0 var(--space-6)}
footer .logo{color:#fff}
footer .logo .logo-mark{box-shadow:none}
.footer-inner{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.footer-tagline{margin:var(--space-2) 0 0;color:#9999b8;font-size:var(--fs-sm)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.footer-links a{color:#d4d0e8;text-decoration:none;font-size:var(--fs-sm);min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{color:var(--c-violet)}
.footer-fineprint{font-size:var(--fs-xs);color:#9090b0;margin:0;border-top:1px solid #2a1d4e;padding-top:var(--space-4);grid-column:1/-1;line-height:1.7}
.footer-fineprint strong{color:#fff}


@media (min-width:640px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .mode-grid{grid-template-columns:repeat(3,1fr)}
  .resp-list{grid-template-columns:repeat(2,1fr)}
}


@media (min-width:768px){
  section{padding:var(--space-16) 0}
  .section-title{font-size:var(--fs-3xl)}
  .feature-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
  .cta-inner{grid-template-columns:1fr 1fr;gap:var(--space-12)}
  .cta h2{font-size:var(--fs-3xl)}
  .footer-inner{grid-template-columns:1fr 1fr auto}
}


@media (min-width:1024px){
  .feature-grid{grid-template-columns:repeat(4,1fr)}
}