/* ============================================================
   AI BOYFRIEND — companion pages (Download · Legal · Support)
   Shares the cinematic dark system of the main landing page.
   Type: Instrument Serif (display) · Geist (UI) · Geist Mono (labels)
   ============================================================ */

:root{
  --bg:      #08070C;
  --bg-2:    #0B0A11;
  --panel:   #110F18;
  --panel-2: #17141F;
  --line:    rgba(255,255,255,.085);
  --line-2:  rgba(255,255,255,.16);

  --ink:   #F4F1F7;
  --ink-2: #C7C2D4;
  --ink-3: #8C8699;
  --ink-4: #5C5769;

  --pink:   #FF4F8F;
  --purple: #B25CFF;
  --violet: #7B62FF;
  --grad:      linear-gradient(100deg,#FF5C9E 0%,#B25CFF 52%,#7B62FF 100%);
  --grad-text: linear-gradient(100deg,#FF7FB4,#C98CFF 60%,#9E8CFF);

  --display:'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
}
main{ flex:1 0 auto; width:100%; }
body > footer{ flex-shrink:0; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(255,92,158,.3); color:#fff; }

/* film grain + vignette */
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("assets/grain.png"); background-size:220px;
  opacity:.5; mix-blend-mode:overlay; }
.vignette{ position:fixed; inset:0; z-index:8999; pointer-events:none;
  box-shadow:inset 0 0 360px 60px rgba(0,0,0,.6); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; }

/* ---- type ---- */
.kicker{ display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.kicker .idx{ color:var(--pink); }
.kicker::before{ content:""; width:30px; height:1px; background:linear-gradient(90deg,var(--pink),transparent); }

.display{ font-family:var(--display); font-weight:700; line-height:.98; letter-spacing:-.025em; margin:0; }
.italic{ font-style:italic; }
.grad-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-family:var(--sans); font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:var(--ink-2); font-weight:400; letter-spacing:-.01em; }

/* ---- brand lockup ---- */
.brand{ display:inline-flex; align-items:center; gap:14px; }
.brand img{ width:46px; height:46px; border-radius:13px; box-shadow:0 14px 34px -12px rgba(178,92,255,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
.brand .bn{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em; line-height:1; }

/* ---- buttons ---- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:15.5px; font-weight:500; letter-spacing:-.01em;
  height:54px; padding:0 26px; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .5s var(--ease), background .3s, border-color .3s, color .3s; }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-primary{ background:var(--ink); color:#0a0910; }
.btn-primary:hover{ background:#fff; }
.btn-line{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--ink); background:rgba(255,255,255,.04); }
.btn-grad{ background:var(--grad); color:#fff; }
.btn-grad:hover{ filter:brightness(1.08); }
.btn-sm{ height:44px; padding:0 20px; font-size:14px; }

.store-row{ display:flex; flex-wrap:wrap; gap:14px; }
.store-btn{ display:inline-flex; align-items:center; gap:13px; height:62px; padding:0 26px 0 22px;
  border-radius:15px; background:rgba(255,255,255,.03); border:1px solid var(--line-2); color:var(--ink);
  transition:transform .5s var(--ease), border-color .3s, background .3s; }
.store-btn:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.store-btn svg{ width:26px; height:26px; flex:none; }
.store-btn .sb-label{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-btn .sb-top{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.store-btn .sb-main{ font-size:18px; font-weight:600; letter-spacing:-.01em; }

/* ============================================================
   PHONE / DEVICE + CHAT SCREEN  (lifted from the landing page)
   ============================================================ */
.device{ position:relative; width:330px; flex:none; border-radius:54px; padding:12px;
  background:linear-gradient(155deg,#55545e,#1c1b22 30%,#15141b 72%,#56555f);
  box-shadow:0 60px 110px -30px rgba(0,0,0,.85),
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 0 0 4px rgba(0,0,0,.8); }
.device-screen{ position:relative; border-radius:42px; overflow:hidden; background:#0a0910; height:680px; box-shadow:inset 0 0 0 2px #000; }
.device-screen::after{ content:""; position:absolute; inset:0; z-index:40; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.05), transparent 30%); }
.device-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:28px; background:#000; border-radius:20px; z-index:30; }
.device-notch::after{ content:""; position:absolute; right:7px; top:50%; transform:translateY(-50%); width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2a3340, #0a0d12 65%); }
.device-home{ position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:118px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.9); z-index:30; }

/* physical side buttons */
.device-btn{ position:absolute; left:-2.5px; width:3px; border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#4c4b54,#1b1a21); box-shadow:-1px 1px 2px rgba(0,0,0,.55); }
.device-btn.action{ top:112px; height:26px; }
.device-btn.vol-up{ top:158px; height:46px; }
.device-btn.vol-down{ top:212px; height:46px; }
.device-btn.power{ left:auto; right:-2.5px; top:178px; height:74px; border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#1b1a21,#4c4b54); box-shadow:1px 1px 2px rgba(0,0,0,.55); }

.scr-status{ position:absolute; top:0; left:0; right:0; height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 28px 0 32px; font-size:14px; font-weight:600; z-index:20; }
.scr-status .sicons{ display:flex; gap:6px; align-items:center; color:var(--ink); }
.scr-status .sicons svg{ height:11px; width:auto; display:block; }

.s-chat{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); }
.s-chat .top{ display:flex; align-items:center; gap:10px; padding:54px 16px 12px; border-bottom:1px solid var(--line); }
.s-chat .top img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.s-chat .top b{ font-size:15px; } .s-chat .top span{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.s-chat .top span i{ width:6px; height:6px; border-radius:50%; background:#34d399; display:inline-block; }
.s-chat .body{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:14px; }
.s-chat .b{ max-width:80%; padding:9px 13px; font-size:13.5px; line-height:1.4; border-radius:15px; }
.s-chat .b.in{ align-self:flex-start; background:var(--panel-2); border-top-left-radius:4px; }
.s-chat .b.out{ align-self:flex-end; background:var(--grad); color:#fff; border-top-right-radius:4px; }
.s-chat .b.tin{ align-self:flex-start; display:flex; gap:5px; padding:13px 14px; }
.s-chat .b.tin i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:typing 1.3s infinite; }
.s-chat .b.tin i:nth-child(2){ animation-delay:.18s; } .s-chat .b.tin i:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
.s-chat .composer{ display:flex; gap:8px; padding:10px 14px 18px; }
.s-chat .composer .f{ flex:1; height:38px; border-radius:19px; background:rgba(255,255,255,.06); border:1px solid var(--line); display:flex; align-items:center; padding:0 14px; font-size:13px; color:var(--ink-4); }
.s-chat .composer .s{ width:38px; height:38px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; }
.s-chat .composer .s svg{ width:16px; height:16px; color:#fff; }
.chat-disc{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--ink-4); text-align:center; padding:0 0 18px; background:var(--bg); }

/* ============================================================
   SUBPAGE TOP BAR + FOOTER
   ============================================================ */
.topbar{ position:sticky; top:0; z-index:60; background:rgba(8,7,12,.72); backdrop-filter:blur(20px) saturate(1.3); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.topbar .brand img{ width:34px; height:34px; border-radius:10px; }
.topbar .brand .bn{ font-size:21px; }
.back-link{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); transition:color .25s; }
.back-link:hover{ color:var(--ink); }
.back-link svg{ width:16px; height:16px; }

.minifoot{ border-top:1px solid var(--line); padding:32px 0; margin-top:80px; }
.minifoot-inner{ display:flex; flex-wrap:wrap; gap:16px 26px; justify-content:space-between; align-items:center; }
.minifoot p{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-4); }
.minifoot nav{ display:flex; flex-wrap:wrap; gap:22px; }
.minifoot nav a{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); transition:color .25s; }
.minifoot nav a:hover{ color:var(--ink); }

@media (max-width:760px){
  .wrap{ padding:0 22px; }
}