/* © HKSolutions — AlibiLock. All rights reserved.
   Product page. Colours, radii and spacing come from /static/tokens.css (brand/tokens.json);
   light and dark follow the device setting. Mobile first. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-background);color:var(--color-textPrimary);
  font:var(--weight-body) 16px/1.6 var(--font-latin),var(--font-deva),system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.script-deva{font-family:var(--font-deva),var(--font-latin),system-ui,sans-serif;line-height:1.75}
h1,h2,h3{font-weight:var(--weight-heading);line-height:1.2;margin:0 0 calc(var(--space)*1.5);letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.1rem)}
h2{font-size:clamp(1.45rem,3.6vw,2rem)}
h3{font-size:1.1rem}
p{margin:0 0 calc(var(--space)*1.5)}
a{color:var(--color-secondary);text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--color-secondary);outline-offset:3px;border-radius:4px}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 calc(var(--space)*2)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--space);top:-60px;z-index:10;background:var(--color-surface);color:var(--color-textPrimary);
  padding:var(--space) calc(var(--space)*2);border-radius:var(--radius-button);border:1px solid var(--color-border)}
.skip:focus{top:var(--space)}
.icon{flex:0 0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--color-background) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.site-header__inner{display:flex;align-items:center;gap:calc(var(--space)*2);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:calc(var(--space)*1.25);color:inherit;text-decoration:none;margin:0}
.site-header .brand{margin-right:auto}
.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;flex:0 0 36px;
  background:var(--color-primary);color:var(--color-onPrimary);font-weight:600;font-size:.85rem;letter-spacing:.04em}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text span{font-size:.85rem;color:var(--color-textSecondary)}
.site-nav{display:none;gap:calc(var(--space)*.5)}
.site-nav a{color:var(--color-textPrimary);text-decoration:none;padding:var(--space) calc(var(--space)*1.25);border-radius:var(--radius-button);
  min-height:var(--touch);display:inline-flex;align-items:center}
.site-nav a:hover{background:var(--color-surface)}
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space);min-height:var(--touch);
  padding:0 calc(var(--space)*1.5);border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-surface)}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space);box-shadow:0 12px 32px rgb(0 0 0 / .14)}
.lang-menu a{display:flex;align-items:center;min-height:var(--touch);padding:0 calc(var(--space)*1.5);border-radius:var(--radius-button);
  color:var(--color-textPrimary);text-decoration:none}
.lang-menu a:hover{background:var(--color-background)}
.lang-menu a[aria-current]{font-weight:600;color:var(--color-secondary)}

/* Sections */
.section,.band{padding:calc(var(--space)*8) 0}
.band{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.lead{font-size:1.15rem;color:var(--color-textSecondary)}
.note{font-size:.875rem;color:var(--color-textSecondary)}
.eyebrow{display:inline-block;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-secondary)}
.script-deva .eyebrow{text-transform:none;letter-spacing:0}

/* Hero */
.hero{padding:calc(var(--space)*6) 0 calc(var(--space)*8);
  background:radial-gradient(120% 80% at 85% 10%,color-mix(in srgb,var(--color-secondary) 16%,transparent),transparent 60%),
             linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 7%,var(--color-background)),var(--color-background))}
.hero__inner{display:grid;gap:calc(var(--space)*5);align-items:center}
.hero h1{color:var(--color-primary)}
.store-button{display:inline-flex;align-items:center;gap:var(--space);min-height:52px;padding:0 calc(var(--space)*2.5);
  border-radius:var(--radius-button);border:1px dashed var(--color-textSecondary);color:var(--color-textPrimary);
  font-weight:600;cursor:not-allowed;background:var(--color-surface)}
.hero__visual{display:flex;justify-content:center}

/* Phone frame around real screenshots */
.phone{margin:0;width:min(250px,70vw);aspect-ratio:9/16;border-radius:30px;padding:9px;background:#0F172A;
  box-shadow:0 1px 0 1px #334155 inset,0 24px 48px -12px rgb(11 37 69 / .35)}
.phone img,.phone svg{width:100%;height:100%;border-radius:22px;object-fit:cover;display:block}
.hero .phone{width:min(290px,76vw)}
.drawn-bg{fill:var(--color-background)}
.drawn-card{fill:var(--color-surface);stroke:var(--color-border);stroke-width:2}
.drawn-ink{fill:var(--color-primary)}
.drawn-line{fill:none;stroke:var(--color-primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.drawn-line--accent{stroke:var(--color-secondary)}

/* Problem */
.problem{display:grid;gap:calc(var(--space)*3);max-width:860px}
.problem__icon,.card__icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:color-mix(in srgb,var(--color-secondary) 14%,transparent);color:var(--color-secondary)}
.problem__answer{font-weight:600}

/* Steps */
.steps{display:grid;gap:calc(var(--space)*5);margin-top:calc(var(--space)*4);counter-reset:none}
.step{display:grid;gap:calc(var(--space)*2.5);justify-items:center;text-align:center}
.step__number{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;margin-bottom:var(--space);
  background:var(--color-primary);color:var(--color-onPrimary);font-weight:600}
.step .phone{width:min(220px,62vw)}

/* Feature, cards, points */
.feature{max-width:860px}
.checks{display:grid;gap:calc(var(--space)*1.5);margin-top:calc(var(--space)*2)}
.checks li,.pricing__partyb{display:flex;gap:calc(var(--space)*1.5);align-items:flex-start}
.checks .icon,.pricing__partyb .icon{color:var(--color-success);margin-top:2px}
.cards{display:grid;gap:calc(var(--space)*2);margin-top:calc(var(--space)*4)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:calc(var(--space)*3)}
.card .card__icon{margin-bottom:calc(var(--space)*2)}
.card p{color:var(--color-textSecondary);margin:0}
.split{display:grid;gap:calc(var(--space)*5);align-items:center}
.split__visual{display:flex;justify-content:center}
.points{display:grid;gap:calc(var(--space)*3);margin-top:calc(var(--space)*3)}
.points li{display:flex;gap:calc(var(--space)*2);align-items:flex-start}
.points p{color:var(--color-textSecondary);margin:0}
.points h3{margin-bottom:calc(var(--space)*.5)}

/* Pricing */
.pricing{max-width:720px;margin:0 auto;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:calc(var(--space)*5) calc(var(--space)*3)}
.pricing__free{font-size:1.35rem;font-weight:600;color:var(--color-primary)}
.pricing__partyb{justify-content:center;font-weight:600;margin:0}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{cursor:pointer;font-weight:600;min-height:var(--touch);padding:calc(var(--space)*2) calc(var(--space)*4) calc(var(--space)*2) 0;
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--space);top:50%;transform:translateY(-50%);font-size:1.4rem;
  color:var(--color-secondary);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--color-textSecondary)}

/* Footer */
.site-footer{padding:calc(var(--space)*6) 0 calc(var(--space)*4);font-size:.95rem}
.site-footer__inner{display:grid;gap:calc(var(--space)*4)}
.footer-links{display:grid;gap:calc(var(--space)*.25)}
.footer-links li{min-height:var(--touch);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.footer-links span[aria-current]{font-weight:600}
.site-footer__copy{color:var(--color-textSecondary);font-size:.85rem;margin-top:calc(var(--space)*4)}

@media (min-width:720px){
  .problem{grid-template-columns:auto 1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .site-footer__inner{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:960px){
  .site-nav{display:flex}
  .hero{padding:calc(var(--space)*10) 0 calc(var(--space)*12)}
  .hero__inner{grid-template-columns:1.15fr .85fr}
  .steps{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1.2fr .8fr}
}
.points .card__icon{flex:0 0 48px}
.footer-links--langs{display:flex;flex-wrap:wrap;gap:0 calc(var(--space)*2)}