/* count.joy.cam homepage. Same tokens as the app: paper, ink, one marker colour. */
:root { --paper:#F4F1EA; --paper-2:#EAE5DA; --card:#fff; --ink:#16130E; --ink-2:#5E574B; --ink-3:#8C8475; --line:#E2DCCF; --signal:#F0246E; --signal-2:#C4145A; --ok:#0E7F53; --ok-bg:#E2F3EA; --stage:#0E0D0B;
  --display:'Geologica','Noto Sans Armenian',system-ui,sans-serif; --ui:'Onest','Noto Sans Armenian',system-ui,-apple-system,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 var(--ui); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
.ico { flex:none; display:block; }
h1,h2,h3 { font-family:var(--display); letter-spacing:-0.015em; line-height:1.1; margin:0 0 .45em; }
h2 { font-size:clamp(28px,4.5vw,42px); font-weight:800; }
h3 { font-size:20px; font-weight:700; }
p { margin:0 0 .8em; }
.lead { color:var(--ink-2); max-width:56ch; }
:focus-visible { outline:3px solid #2C55D6; outline-offset:3px; border-radius:8px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

.bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:10px clamp(16px,4vw,48px); background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font:700 20px/1 var(--display); margin-right:auto; }
.brand small { font:500 14px var(--ui); color:var(--ink-3); }
.bar nav { display:flex; gap:20px; font-weight:600; font-size:15px; }
.bar nav a, footer nav a { text-decoration:none; }
.bar nav a:hover { color:var(--signal-2); }
.langs { display:flex; align-items:center; gap:6px; font:600 13px var(--ui); color:var(--ink-2); }
.langs a { text-decoration:none; padding:4px 6px; border-radius:6px; }
.langs a[aria-current] { background:var(--ink); color:var(--paper); }
@media (max-width:640px) { .bar nav { display:none; } }

main section { padding:clamp(56px,8vw,104px) clamp(16px,4vw,48px); max-width:1200px; margin:0 auto; }
.cta { display:inline-flex; align-items:center; gap:12px; min-height:60px; padding:0 30px; border-radius:999px; background:var(--signal); color:#fff; text-decoration:none; font:700 19px var(--ui); box-shadow:0 14px 34px -14px rgba(240,36,110,.8); transition:transform .15s ease, background .15s ease; }
.cta:hover { background:var(--signal-2); transform:translateY(-1px); }
.cta:active { transform:scale(.98); }

/* hero: words left, the phone with a real result right */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; padding-top:clamp(36px,6vw,80px) !important; }
.hero h1 { font-size:clamp(42px,7.4vw,84px); font-weight:800; letter-spacing:-0.03em; line-height:.98; }
.hero .sub { font-size:clamp(18px,2.2vw,22px); color:var(--ink-2); max-width:30ch; margin-bottom:28px; }
.hero .note { margin-top:14px; font-size:15px; color:var(--ink-3); }
.phone { margin:0; justify-self:center; width:min(380px,88vw); background:var(--ink); border-radius:44px; padding:12px; box-shadow:0 40px 80px -40px rgba(22,19,14,.55), inset 0 0 0 2px #2b271f; }
.screen { background:var(--stage); border-radius:34px; overflow:hidden; }
.shot { position:relative; line-height:0; }
.shot img { width:100%; height:auto; display:block; aspect-ratio:896/1152; object-fit:cover; transition:opacity .35s ease; }
.shot svg { position:absolute; inset:0; width:100%; height:100%; }
.shot svg circle, .tile svg circle { fill:var(--signal); stroke:#fff; stroke-width:4; }
.shot svg circle { transform-box:fill-box; transform-origin:center; animation:pop .34s cubic-bezier(.2,1.6,.5,1) both; }
@keyframes pop { from { transform:scale(0); } to { transform:scale(1); } }
.readout { display:flex; align-items:center; gap:10px; padding:16px 18px 20px; color:#F4F1EA; flex-wrap:wrap; }
.readout b { font:800 54px/.9 var(--display); letter-spacing:-0.03em; min-width:1.4ch; }
.readout span { font-weight:600; font-size:18px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:999px; background:var(--ok-bg); color:#08513a; font:600 13.5px var(--ui); font-style:normal; margin-left:auto; opacity:0; transition:opacity .3s ease; }
.chip span { font-size:13.5px; }
.chip.on { opacity:1; }
@media (max-width:860px) { .hero { grid-template-columns:1fr; } }

.how ol { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:s; }
.how li { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; position:relative; }
.how li .ico { color:var(--signal); margin-bottom:14px; }
.how li::before { counter-increment:s; content:counter(s); position:absolute; top:18px; right:22px; font:800 46px/1 var(--display); color:var(--paper-2); }
.how p { color:var(--ink-2); margin:0; }
@media (max-width:760px) { .how ol { grid-template-columns:1fr; } }

.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.tile { text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .15s ease; }
.tile:hover { transform:translateY(-2px); }
.tile .pic { position:relative; display:block; line-height:0; }
.tile img { width:100%; height:auto; aspect-ratio:896/1152; object-fit:cover; display:block; }
.tile svg { position:absolute; inset:0; width:100%; height:100%; }
.tile b { position:absolute; left:12px; top:12px; background:var(--ink); color:#fff; font:800 26px/1 var(--display); padding:9px 13px; border-radius:12px; }
.tile .cap { display:block; padding:12px 16px 14px; font-weight:600; }
@media (max-width:760px) { .tiles { grid-template-columns:repeat(2,1fr); gap:10px; } .tile b { font-size:20px; } }

.fast { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,64px); align-items:center; }
.fast p { color:var(--ink-2); font-size:18px; }
.fast ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fast li { display:flex; gap:14px; align-items:flex-start; background:var(--ink); color:#F4F1EA; border-radius:18px; padding:18px 20px; font-weight:500; }
.fast li .ico { color:var(--signal); margin-top:1px; }
@media (max-width:860px) { .fast { grid-template-columns:1fr; } }

.pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; }
.card .ico { color:var(--signal); margin-bottom:14px; }
.card h2 { font-size:28px; }
.card p { color:var(--ink-2); margin:0; }
@media (max-width:760px) { .pair { grid-template-columns:1fr; } }

.plans .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
.plan { background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:10px; }
.plan:first-child { border-color:var(--ink); }
.plan h3 { display:flex; align-items:center; gap:10px; margin:0; }
.soon { font:600 12.5px var(--ui); font-style:normal; background:#FFF2CC; color:#6b4a00; padding:4px 9px; border-radius:999px; }
.price { font:800 38px/1 var(--display); }
.price small { font:500 15px var(--ui); color:var(--ink-2); }
.plan ul { list-style:none; padding:0; margin:4px 0 8px; display:grid; gap:8px; font-size:15.5px; }
.plan li { display:flex; gap:9px; align-items:flex-start; }
.plan li .ico { color:var(--ok); margin-top:3px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:999px; border:1.5px solid var(--ink); font-weight:700; text-decoration:none; margin-top:auto; }
.btn:hover { background:var(--ink); color:var(--paper); }
@media (max-width:860px) { .plans .grid { grid-template-columns:1fr; } }

.faq details { border-bottom:1px solid var(--line); padding:18px 0; max-width:820px; }
.faq summary { cursor:pointer; font:700 19px/1.3 var(--display); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-weight:500; color:var(--signal); }
.faq details[open] summary::after { content:'-'; }
.faq details p { color:var(--ink-2); margin:10px 0 0; max-width:70ch; }

.final { text-align:center; }
.final h2 { font-size:clamp(32px,5vw,52px); }

footer { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:36px clamp(16px,4vw,48px) 48px; border-top:1px solid var(--line); color:var(--ink-2); font-size:15px; max-width:1200px; margin:0 auto; }
footer p { margin:10px 0 0; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; font-weight:600; color:var(--ink); }