/* =====================================================================
   Phone Setu — Marketing / public site styles (navy, on app.css tokens)
   ===================================================================== */

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
    backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:var(--fs-lg);
    color:var(--navy-900);letter-spacing:-.02em}
.brand:hover{color:var(--navy-900)}
.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(135deg,var(--navy-700),var(--navy-900));box-shadow:var(--shadow-navy)}
.brand-mark svg{width:20px;height:20px}
.nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav-links a{color:var(--slate-600);font-weight:600;font-size:var(--fs-sm);position:relative}
.nav-links a:hover{color:var(--accent)}
.nav-links a.active{color:var(--navy-800);font-weight:700}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:3px;
    background:var(--accent);border-radius:3px 3px 0 0}
@media (max-width:860px){.nav-links a.active::after{display:none}}
/* Offset in-page anchors (e.g. "Why us" -> #why) for the sticky header */
section[id]{scroll-margin-top:84px}
.nav-cta{display:flex;align-items:center;gap:var(--space-3)}
.lang-form{margin:0;width:clamp(120px,26vw,168px)}
.lang-form .combo{margin:0}
.lang-form .control{padding:.45rem .6rem;font-size:var(--fs-sm)}
@media (max-width:520px){.lang-form{width:120px}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--navy-800)}
.mobile-only{display:none}
@media (max-width:860px){
    .nav-links{display:none}
    .hide-nav{display:none !important}
    .nav-toggle{display:inline-flex}
    .nav-links.mobile-open{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);
        position:absolute;top:68px;left:0;right:0;background:#fff;padding:var(--space-5);list-style:none;margin:0;
        border-bottom:1px solid var(--border);box-shadow:var(--shadow-md)}
    .nav-links.mobile-open .mobile-only{display:block;width:100%}
    .nav-links.mobile-open .lang-form{width:100%}
    .nav-links.mobile-open a:not(.btn){padding:.35rem 0}
}
/* Buttons living inside the nav list must keep their own foreground colour —
   ".nav-links a" (slate) otherwise out-specifies ".btn" and turns the label dark. */
.nav-links a.btn{color:var(--btn-fg)}
.nav-links a.btn:hover{color:#fff}
.nav-links a.btn-secondary,.nav-links a.btn-secondary:hover{color:var(--navy-800)}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,8vw,7rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
    background:
        radial-gradient(60% 55% at 80% 10%, var(--blue-100) 0%, transparent 55%),
        radial-gradient(50% 45% at 6% 92%, #e6ecfb 0%, transparent 50%),
        linear-gradient(180deg,var(--white),var(--bg-soft))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:var(--space-5)}
.hero .grad{background:linear-gradient(120deg,var(--navy-800),var(--blue-600));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-8);color:var(--text-soft);font-size:var(--fs-sm)}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust svg{width:18px;height:18px;color:var(--success)}

/* Hero app mock */
.hero-visual{position:relative}
.phone-mock{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
    padding:var(--space-5);max-width:380px;margin-inline:auto;animation:floaty 6s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mock-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--r-md)}
.mock-row+.mock-row{margin-top:var(--space-2)}
.mock-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.mock-name{font-weight:700;font-size:var(--fs-sm)}
.mock-sub{font-size:var(--fs-xs);color:var(--text-muted)}
.mock-pill{margin-left:auto;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--r-full)}
.stat-float{position:absolute;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
    box-shadow:var(--shadow-md);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm)}
.stat-float b{font-size:var(--fs-xl);color:var(--accent);display:block}
.stat-float.tl{top:-18px;left:-10px;animation:floaty 7s var(--ease) infinite}
.stat-float.br{bottom:-16px;right:-6px;animation:floaty 5.5s var(--ease) infinite reverse}
@media (max-width:520px){.stat-float{display:none}}

/* Section heading */
.sec-head{max-width:720px;margin:0 auto var(--space-12);text-align:center}
.sec-head p{color:var(--text-soft);font-size:var(--fs-lg);margin-bottom:0}

/* Steps */
.steps{counter-reset:step}
.step{position:relative;padding-left:58px}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;
    border-radius:50%;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));color:#fff;display:grid;
    place-items:center;font-weight:800;box-shadow:var(--shadow-navy)}

/* Comparison */
.cmp-yes{color:var(--success);font-weight:700}
.cmp-no{color:var(--slate-400)}
.cmp-soon{color:var(--warning);font-weight:600}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);align-items:stretch}
@media (max-width:1000px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.price-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.price-card{display:flex;flex-direction:column;position:relative}
.price-card.popular{border:2px solid var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.price-tag{display:flex;align-items:baseline;gap:6px;margin:var(--space-3) 0}
.price-tag .amt{font-size:var(--fs-4xl);font-weight:800;color:var(--navy-900);letter-spacing:-.02em}
.price-tag .was{color:var(--text-muted);text-decoration:line-through;font-weight:600}
.price-tag .cad{color:var(--text-soft);font-weight:600}
.popular-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
    font-size:var(--fs-xs);font-weight:700;padding:4px 14px;border-radius:var(--r-full);box-shadow:0 12px 30px rgba(37,99,235,.28)}
.price-features{list-style:none;margin:var(--space-4) 0 var(--space-6);padding:0;display:grid;gap:var(--space-3)}
.price-features li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--fs-sm);color:var(--slate-700)}
.price-features svg{width:18px;height:18px;color:var(--success);flex:none;margin-top:2px}
.price-card .btn{margin-top:auto}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff;border-radius:var(--r-xl);
    padding:clamp(2.5rem,5vw,4rem);text-align:center;box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff}
.cta-band p{color:var(--blue-100);font-size:var(--fs-lg);max-width:60ch;margin-inline:auto}

/* Footer */
.site-footer{background:var(--navy-900);color:var(--slate-300);padding-block:var(--space-16) var(--space-8);margin-top:var(--space-24)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-8)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-4)}
.site-footer a{color:var(--slate-300);font-size:var(--fs-sm)}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.footer-brand .brand{color:#fff}
.footer-brand p{color:var(--slate-400);font-size:var(--fs-sm);max-width:34ch;margin-top:var(--space-3)}
.footer-bottom{border-top:1px solid var(--navy-700);margin-top:var(--space-12);padding-top:var(--space-6);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);font-size:var(--fs-sm);color:var(--slate-400)}

/* Cookie consent notice (bottom bar, shown once until a choice is stored) */
.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy-800);color:#fff;
    box-shadow:0 -10px 34px rgba(11,36,71,.28);padding:var(--space-4) var(--space-5);
    animation:cookieUp var(--dur) var(--ease) both}
.cookie-consent[hidden]{display:none}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-consent-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.cookie-consent p{margin:0;flex:1 1 340px;font-size:var(--fs-sm);line-height:1.55;color:rgba(255,255,255,.9)}
.cookie-consent-actions{display:flex;align-items:center;gap:var(--space-4);flex-shrink:0}
.cookie-link{background:none;border:0;color:#fff;font:inherit;font-weight:600;font-size:var(--fs-sm);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.85;padding:.4rem .2rem}
.cookie-link:hover{opacity:1}
@media (max-width:560px){
    .cookie-consent-actions{width:100%;justify-content:space-between}
    .cookie-consent-actions .btn{flex:1}
}