/* site styles v2 — change the number here and in ?v= of both pages (index.html, en/index.html) whenever this file changes:
   browsers keep this file for hours, the number makes them take the new one together with the page. */
/* The site «for now» (IDEAS 73, 2026-11-04): one page, uk + en. Colours follow the app (app/index.html theme-color). */
:root{
  --bg:#fbfaf7; --card:#ffffff; --text:#1f1e23; --muted:#5f5d66; --line:#e7e3da;
  --accent:#d9a441; --accent-text:#1b1b1b; --step:#f3ede0;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1f1e23; --card:#28272d; --text:#f2f0eb; --muted:#b4b1ba; --line:#36343c; --step:#33312f; }
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust:100%;}
.wrap{max-width:640px; margin:0 auto; padding:0 16px;}
a{color:inherit;}

header{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none;}
.brand img{width:36px; height:36px; border-radius:50%;}
.lang{font-size:14px; font-weight:600; text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}

.hero{text-align:center; padding:28px 0 36px;}
.hero img{width:112px; height:112px; border-radius:50%; box-shadow:0 8px 28px rgba(0,0,0,.18);}
h1{font-size:34px; line-height:1.15; margin:18px 0 10px; letter-spacing:-.01em;}
.lead{font-size:18px; color:var(--muted); margin:0 auto 24px; max-width:30em;}
.btn{display:inline-block; background:var(--accent); color:var(--accent-text); font-weight:700; font-size:17px;
  text-decoration:none; padding:14px 26px; border-radius:14px;}
.btn:focus-visible,.lang:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.note{font-size:14px; color:var(--muted); margin:14px 0 0;}

section{padding:28px 0; border-top:1px solid var(--line);}
h2{font-size:24px; margin:0 0 8px;}
section > p{margin:0 0 18px; color:var(--muted);}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 18px 8px; margin:0 0 14px;}
h3{font-size:18px; margin:0 0 12px;}
ol{list-style:none; counter-reset:step; margin:0; padding:0;}
ol li{counter-increment:step; position:relative; padding:0 0 12px 40px; min-height:28px;}
ol li::before{content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
  background:var(--step); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;}
.contact{text-align:center;}
.contact .btn{word-break:break-all;}

footer{padding:28px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; text-align:center;}

/* How to install (2026-11-04, owner: «text isn't enough», then «drawn, not screenshots — they don't translate, and a whole
   phone tells more»): drawn phones, a red ring / frame where to tap. iPhone — Safari 26 (iOS 26), drawn from the owner's
   screenshots, the same drawings as the app's install guide (app/install.js); Android — Chrome (from site/). */
.steps li p{margin:2px 0 10px;}
.hint{font-size:14px; color:var(--muted); margin:4px 0 12px;}

.phone{--pw:200px; width:var(--pw); height:calc(var(--pw)*2.05); border-radius:24px; background:#0c0d10; padding:9px;
  box-shadow:0 10px 26px rgba(0,0,0,.22); position:relative; margin:0 0 18px;}
.phone .scr{position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; background:#fff; color:#111;
  font:11px/1.3 -apple-system,"Segoe UI",Roboto,sans-serif; display:flex; flex-direction:column;}
.sb{height:28px; flex:0 0 28px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-weight:700; font-size:10.5px;}
.sb i{font-style:normal; letter-spacing:1px;}
.sb.home-sb{background:#2e7d6b; color:#fff;}
.page{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#121317; color:#eef0f4; padding:10px;}
.page img{width:54px; height:54px; border-radius:50%;}
.page b{font-size:14px;}
.page .fld{width:80%; height:20px; border-radius:7px; background:#22252d;}
.page .pbtn{width:80%; height:22px; border-radius:7px; background:#e0a83e; color:#17181c; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:10px;}
.page.dim{filter:brightness(.55);}
.chr{display:flex; align-items:center; gap:6px; padding:6px 8px; background:#fff; border-bottom:1px solid #e3e3e3; flex:0 0 auto; color:#444;}
.chr .url{flex:1; min-width:0; background:#f1f3f4; border-radius:14px; height:24px; display:flex; align-items:center; padding:0 8px; font-size:9.5px; color:#333; white-space:nowrap; overflow:hidden;}
.chr svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block;}
.tap{position:relative; border-radius:50%;}
.tap::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:2.5px solid #ff3b5c; box-shadow:0 0 0 4px rgba(255,59,92,.18); pointer-events:none;}
.tap-row{position:relative;}
.tap-row::after{content:""; position:absolute; inset:-3px; border-radius:9px; border:2.5px solid #ff3b5c; box-shadow:0 0 0 4px rgba(255,59,92,.18); pointer-events:none;}
.menu{position:absolute; top:56px; right:8px; width:72%; background:#fff; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.25); padding:4px 0;}
.menu div{padding:7px 12px; font-size:10.5px;}
.dialog{position:absolute; left:12px; right:12px; top:32%; background:#fff; border-radius:16px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);}
.dialog b{display:block; font-size:12px; margin-bottom:10px;}
.dialog .app{display:flex; gap:9px; align-items:center; margin-bottom:12px;}
.dialog .app img{width:32px; height:32px; border-radius:50%;}
.dialog .app small{display:block; color:#777; font-size:9px;}
.dialog .acts{display:flex; justify-content:flex-end; gap:16px; font-weight:700; color:#1a73e8; font-size:10.5px;}
.dialog .acts .tap-row{padding:0 4px;}
.home{flex:1; background:linear-gradient(170deg,#2e7d6b,#4a9d8a 55%,#a4d4b4); display:grid; grid-template-columns:repeat(4,1fr); gap:12px 8px; padding:14px 12px; align-content:start;}
.home .app{display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:8.5px;}
.home .app i{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.35); display:block;}
.home .app img{width:34px; height:34px; border-radius:50%;}
.banner{position:absolute; left:8px; right:8px; bottom:10px; background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.25); padding:9px; display:flex; align-items:center; gap:8px; font-size:10px;}
.banner img{width:26px; height:26px; border-radius:50%;}
.banner span{flex:1;} .banner em{font-style:normal; font-weight:700; color:#1a73e8;}

/* iPhone: the Dynamic Island, a dark status bar over a dark page, the home screen */
.phone.ios{border-radius:30px;} .phone.ios .scr{border-radius:22px; background:#121317;}
.phone .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:58px; height:16px; border-radius:10px; background:#0c0d10; z-index:5;}
.sb.sb26{background:#121317; color:#fff;}
.sb.home-sb-ios{background:#5b7bd5; color:#fff;}
.phone.ios .home{background:linear-gradient(160deg,#5b7bd5,#9a6fd0 60%,#e08bb0);}
.phone.ios .home .app i, .phone.ios .home .app img{border-radius:9px;}

/* Safari 26 — the same as the app (app/css/8-v104-glass.css, «INSTALL GUIDE — Safari 26») */
.ig-bar26{position:absolute; left:8px; right:8px; bottom:10px; display:flex; align-items:center; gap:6px;}
.ig-bar26 .c{width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:#2a2b30; color:#e8e8ea; display:flex; align-items:center; justify-content:center;}
.ig-bar26 .pill{flex:1; min-width:0; height:30px; border-radius:15px; background:#2a2b30; color:#e8e8ea; font-size:9.5px; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden;}
.ig-bar26 svg, .ig-pop26 svg, .ig-sheet26 svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; flex:0 0 auto;}
.ig-pop26{position:absolute; right:8px; bottom:48px; width:72%; background:#1f2024; color:#f2f2f4; border-radius:16px; padding:6px; box-shadow:0 10px 26px rgba(0,0,0,.45);}
.ig-pop26 div{display:flex; align-items:center; gap:8px; padding:7px 8px; font-size:10.5px;}
.ig-sheet26{position:absolute; left:0; right:0; bottom:0; background:#1c1c1e; color:#f2f2f4; border-radius:18px 18px 0 0; padding:10px 10px 14px; box-shadow:0 -6px 20px rgba(0,0,0,.4);}
.ig-sheet26 .head{display:flex; align-items:center; gap:8px; padding:2px 2px 9px; border-bottom:1px solid #38383a; margin-bottom:9px;}
.ig-sheet26 .head img{width:30px; height:30px; border-radius:8px; background:#fff;}
.ig-sheet26 .head small{display:block; color:#98989f; font-size:9px;}
.ig-sheet26 .apps{display:flex; gap:9px; padding:0 2px 9px; border-bottom:1px solid #38383a; margin-bottom:9px;}
.ig-sheet26 .apps i{width:28px; height:28px; border-radius:8px; display:block;}
.ig-sheet26 .acts{display:flex; justify-content:space-between; gap:4px;}
.ig-sheet26 .acts > div{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:7.5px; line-height:1.15; text-align:center; color:#d8d8dc;}
.ig-sheet26 .acts .c{width:30px; height:30px; border-radius:50%; background:#3a3a3c; color:#fff; display:flex; align-items:center; justify-content:center;}
.ig-sheet26 .list{background:#2c2c2e; border-radius:12px; padding:2px 0;}
.ig-sheet26 .list div{display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:10.5px;}
.ig-add26{flex:1; background:#1c1c1e; color:#f2f2f4; padding:6px 8px;}
.ig-add26 .top{display:flex; align-items:center; gap:6px; padding:4px 0 12px;}
.ig-add26 .top .x{width:24px; height:24px; border-radius:50%; background:#2c2c2e; display:flex; align-items:center; justify-content:center; font-size:10px;}
.ig-add26 .top b{flex:1; font-size:10.5px;}
.ig-add26 .top .add{background:#6aa8ff; color:#0b2b5e; font-weight:700; font-size:10.5px; padding:5px 10px; border-radius:14px;}
.ig-add26 .card{background:#2c2c2e; border-radius:10px; padding:9px; display:flex; gap:9px; align-items:center; margin-bottom:12px;}
.ig-add26 .card img{width:38px; height:38px; border-radius:9px;}
.ig-add26 .card div{flex:1; min-width:0;} .ig-add26 .card u{text-decoration:none; display:block; border-bottom:1px solid #3a3a3c; padding-bottom:4px; font-weight:600; font-size:11px;}
.ig-add26 .card small{display:block; color:#98989f; font-size:8.5px; padding-top:4px; white-space:nowrap; overflow:hidden;}
.ig-add26 .sw{background:#2c2c2e; border-radius:10px; padding:9px; display:flex; align-items:center; justify-content:space-between; font-size:10px;}
.ig-add26 .sw i{width:30px; height:18px; border-radius:9px; background:#34c759; position:relative; flex:0 0 auto;}
.ig-add26 .sw i::after{content:""; position:absolute; right:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff;}