/* ============ Cotémon — navy brand world (single theme by design) ============ */
:root{
  color-scheme: dark;
  --bg-top:#131F4A; --bg-mid:#0E1733; --bg-bot:#0B1229;
  --panel:#16224A;
  --glass:rgba(255,255,255,0.055);
  --glass-2:rgba(255,255,255,0.10);
  --brand:#4DA3FF; --brand-2:#7DBEFF; --brand-bright:#6BB4FF;
  --value:#45D6A3; --value-2:#5EDDB0;
  --ink:#FFFFFF;
  --muted:rgba(255,255,255,0.68);
  --faint:rgba(255,255,255,0.42);
  --line:rgba(255,255,255,0.12);
  --line-strong:#2C3A66;
  --shadow: 0 24px 60px rgba(0,0,0,0.45);
  --mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans: -apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
  --r-card:18px; --r-lg:24px; --r-pill:999px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background-color:var(--bg-bot);
  background-image:
    radial-gradient(1100px 700px at 100% -220px, rgba(77,163,255,0.16), transparent 62%),
    radial-gradient(900px 620px at -140px 60px, rgba(69,214,163,0.07), transparent 58%),
    linear-gradient(180deg,var(--bg-top) 0,var(--bg-mid) 520px,var(--bg-bot) 1000px);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-0.011em;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--brand-bright);outline-offset:3px;border-radius:8px;}

.eyebrow{font-size:.775rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--brand-bright);display:inline-flex;align-items:center;gap:.5rem;}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brand);opacity:.7;display:inline-block;}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);background:linear-gradient(180deg,rgba(11,18,41,0.72),rgba(11,18,41,0.34));border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.06rem;letter-spacing:-.02em;}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.nav-right{display:flex;align-items:center;gap:18px;}
.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--glass);}
.langs a{font-size:.74rem;font-weight:600;padding:.28rem .55rem;border-radius:var(--r-pill);color:var(--faint);letter-spacing:.02em;}
.langs a.on{background:var(--glass-2);color:var(--ink);}
.navlinks{display:flex;gap:22px;font-size:.9rem;color:var(--muted);}
.navlinks a:hover{color:var(--ink);}
@media (max-width:820px){.navlinks{display:none;}}

/* buttons */
.btn-store{display:inline-flex;transition:transform .18s ease, filter .18s ease;}
.btn-store:hover{transform:translateY(-2px);filter:brightness(1.06);}
.asb{display:block;}

/* hero */
.hero{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(40px,6vw,80px);}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;}.stage{order:-1;}}
h1{font-size:clamp(2.35rem,5.4vw,3.75rem);line-height:1.03;font-weight:700;letter-spacing:-.032em;margin:.9rem 0 0;text-wrap:balance;}
h1 .hl{color:var(--value);white-space:nowrap;}
.sub{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);margin:1.15rem 0 0;max-width:36ch;line-height:1.6;}
.cta-row{display:flex;align-items:center;gap:18px;margin-top:1.9rem;flex-wrap:wrap;}
.rating{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--faint);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem;}
.chip{font-size:.8rem;color:var(--muted);padding:.4rem .7rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--glass);display:inline-flex;align-items:center;gap:.4rem;}
.chip b{color:var(--value);font-weight:700;}

/* phone / scan scene */
.stage{display:flex;justify-content:center;position:relative;}
.stage::after{content:"";position:absolute;inset:auto 0 -30px;height:120px;background:radial-gradient(60% 100% at 50% 0,rgba(77,163,255,.22),transparent 70%);filter:blur(6px);z-index:-1;}
.phone{width:min(300px,78vw);aspect-ratio:295/610;border-radius:46px;padding:11px;background:linear-gradient(160deg,#26355f,#0c1430);box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);position:relative;}
.screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#0b1024,#0a1a3a 60%,#0b1024);border:1px solid rgba(255,255,255,.06);}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:#05070f;border-radius:var(--r-pill);z-index:6;}
.scr-top{position:absolute;top:0;left:0;right:0;padding:40px 18px 0;text-align:center;z-index:4;}
.scr-top .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-bright);font-weight:600;}
.scr-top .h{font-size:.95rem;font-weight:600;margin-top:2px;color:#fff;}
.viewfinder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.card{position:relative;width:57%;aspect-ratio:63/88;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%),conic-gradient(from 210deg at 60% 20%, #ffd36e, #ff8fb1, #7db4ff, #7defc0, #ffd36e);box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25);overflow:hidden;}
.card::before{content:"";position:absolute;inset:8px;border-radius:8px;background:linear-gradient(180deg,rgba(6,12,30,.28),rgba(6,12,30,.55));}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 47%,transparent 62%);mix-blend-mode:screen;opacity:.6;}
.bracket{position:absolute;width:34px;height:34px;border:3px solid var(--brand);z-index:3;filter:drop-shadow(0 0 8px rgba(77,163,255,.6));}
.bracket.tl{top:-9px;left:-9px;border-right:0;border-bottom:0;border-top-left-radius:8px;}
.bracket.tr{top:-9px;right:-9px;border-left:0;border-bottom:0;border-top-right-radius:8px;}
.bracket.bl{bottom:-9px;left:-9px;border-right:0;border-top:0;border-bottom-left-radius:8px;}
.bracket.br{bottom:-9px;right:-9px;border-left:0;border-top:0;border-bottom-right-radius:8px;}
.scanline{position:absolute;left:-6px;right:-6px;height:2px;z-index:4;background:linear-gradient(90deg,transparent,var(--brand-bright),transparent);box-shadow:0 0 14px 3px rgba(77,163,255,.75);animation:scan 2.8s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes scan{0%{top:2%;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{top:98%;opacity:0;}}
.result{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;width:78%;background:rgba(10,20,44,.72);border:1px solid rgba(94,221,176,.5);border-radius:16px;padding:12px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:pop 2.8s ease infinite;}
@keyframes pop{0%,40%{opacity:.35;transform:translateX(-50%) translateY(6px);}60%,100%{opacity:1;transform:translateX(-50%) translateY(0);}}
.result .name{font-size:.78rem;color:var(--muted);}
.result .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700;color:var(--value);line-height:1.1;margin-top:2px;}
.result .src{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:.66rem;color:var(--faint);}
.result .src .up{color:var(--value-2);font-family:var(--mono);}
@media (prefers-reduced-motion:reduce){.scanline{animation:none;top:96%;}.result{animation:none;opacity:1;transform:translateX(-50%);}html{scroll-behavior:auto;}}

/* sections */
section{padding-block:clamp(56px,8vw,104px);}
.sec-head{max-width:42ch;margin-bottom:clamp(28px,4vw,48px);}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.028em;margin:.7rem 0 0;text-wrap:balance;line-height:1.1;}
.sec-head p{color:var(--muted);margin:.8rem 0 0;font-size:1.04rem;line-height:1.6;}

/* market strip */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.02);}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;}
.strip .lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);}
.strip .srcs{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;}
.srcpill{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;color:var(--ink);}
.srcpill .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.srcpill small{font-family:var(--mono);font-size:.72rem;color:var(--faint);font-weight:500;}

/* features */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:720px){.grid{grid-template-columns:1fr;}}
.feature{padding:26px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);transition:border-color .2s ease, transform .2s ease, background .2s ease;}
.feature:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--glass-2);}
.ficon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(150deg,rgba(77,163,255,.24),rgba(77,163,255,.06));border:1px solid rgba(77,163,255,.3);}
.ficon svg{width:22px;height:22px;stroke:var(--brand-bright);}
.feature h3{font-size:1.12rem;font-weight:650;margin:0 0 .45rem;letter-spacing:-.02em;}
.feature p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:720px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);}
.step .n{font-family:var(--mono);font-size:.8rem;color:var(--brand-bright);font-weight:700;letter-spacing:.1em;}
.step h3{font-size:1.12rem;margin:.5rem 0 .4rem;letter-spacing:-.02em;font-weight:650;}
.step p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;}
.step .arrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--line-strong);z-index:2;}
@media (max-width:720px){.step .arrow{display:none;}}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;}
@media (max-width:640px){.plans{grid-template-columns:1fr;}}
.plan{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);display:flex;flex-direction:column;gap:14px;}
.plan.pro{border-color:rgba(77,163,255,.55);background:linear-gradient(180deg,rgba(77,163,255,.10),var(--glass));box-shadow:0 20px 50px rgba(10,30,70,.4);}
.plan .pname{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.plan .pname b{font-size:1.2rem;letter-spacing:-.02em;}
.plan .price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.1rem;font-weight:700;letter-spacing:-.02em;line-height:1;}
.plan .price .per{font-family:var(--sans);font-size:.9rem;color:var(--muted);font-weight:500;margin-left:2px;}
.plan .alt{font-size:.82rem;color:var(--faint);margin-top:-8px;}
.tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--bg-mid);background:linear-gradient(120deg,var(--brand-2),var(--brand));padding:.28rem .55rem;border-radius:var(--r-pill);white-space:nowrap;}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--muted);}
.plan li svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--value);fill:none;}
.plan .foot{margin-top:auto;font-size:.82rem;color:var(--faint);}

/* faq */
.faq{display:grid;gap:10px;max-width:820px;}
details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);overflow:hidden;}
details[open]{border-color:var(--line-strong);}
summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:16px;}
summary::-webkit-details-marker{display:none;}
summary .plus{color:var(--brand-bright);font-size:1.3rem;line-height:1;transition:transform .2s ease;}
details[open] summary .plus{transform:rotate(45deg);}
details p{margin:0;padding:0 22px 20px;color:var(--muted);line-height:1.6;font-size:.98rem;}

/* final cta */
.final{text-align:center;}
.final .box{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:clamp(36px,6vw,64px);background:radial-gradient(120% 140% at 50% -20%,rgba(77,163,255,.16),transparent 60%),var(--glass);}
.final h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.03em;margin:0 0 1rem;text-wrap:balance;}
.final p{color:var(--muted);max-width:46ch;margin:0 auto 1.8rem;font-size:1.06rem;}
.final .btn-store{margin-inline:auto;}

/* content pages (support / legal) */
.page{padding-block:clamp(40px,7vw,80px);}
.page .wrap{max-width:760px;}
.page h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.03em;margin:.5rem 0 0;line-height:1.1;}
.page .updated{color:var(--faint);font-size:.85rem;margin-top:10px;}
.page .lead{color:var(--muted);font-size:1.08rem;line-height:1.65;margin-top:1.3rem;}
.doc h2{font-size:1.14rem;margin:2rem 0 .5rem;letter-spacing:-.02em;font-weight:650;}
.doc p{color:var(--muted);line-height:1.7;margin:.5rem 0;}
.doc ul{color:var(--muted);line-height:1.7;padding-left:1.15rem;margin:.5rem 0;}
.doc li{margin:.35rem 0;}
.doc a, .contact-card a, .support-block a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:2px;}
.doc b{color:var(--muted);font-weight:700;}
.doc .foot{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--faint);}
.contact-card{padding:22px 24px;border:1px solid rgba(77,163,255,.4);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(77,163,255,.10),var(--glass));margin:1.6rem 0;}
.contact-card h3{margin:0 0 .4rem;font-size:1.05rem;}
.contact-card p{margin:0;color:var(--muted);line-height:1.6;}
.support-block{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);margin-bottom:12px;}
.support-block h3{margin:0 0 .4rem;font-size:1.05rem;letter-spacing:-.01em;}
.support-block p{margin:0;color:var(--muted);line-height:1.65;}
.back{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.5rem;color:var(--brand-bright);font-weight:600;font-size:.92rem;}
.back:hover{color:var(--ink);}

/* footer */
footer{border-top:1px solid var(--line);padding-block:44px;margin-top:20px;}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr;gap:26px;}}
footer .brand{margin-bottom:12px;}
footer .tagline{color:var(--faint);font-size:.9rem;max-width:32ch;line-height:1.6;}
.fcol h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);margin:0 0 14px;font-weight:600;}
.fcol a{display:block;color:var(--muted);font-size:.94rem;margin-bottom:10px;}
.fcol a:hover{color:var(--ink);}
footer .legal{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;color:var(--faint);font-size:.78rem;line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;}
footer .legal .disc{max-width:60ch;}