/*
Theme Name: DokiChat AI
Theme URI: https://dokichat-ai.net/
Author: DokiChat AI
Description: DokiChat AI - AI girlfriends and companion chat landing theme.
Version: 1.4.2
Text Domain: dokichat
*/

:root{
  --bg:#07060d;
  --bg-2:#0d0a19;
  --card:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.10);
  --txt:#f4f1ff;
  --muted:#a49dc2;
  --pink:#ff4d9d;
  --violet:#8b5cf6;
  --cyan:#39d4ff;
  --grad:linear-gradient(100deg,#ff4d9d 0%,#b25cff 48%,#39d4ff 100%);
  --radius:22px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
section{position:relative;padding:96px 0}
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(50rem 30rem at 12% 8%,rgba(255,77,157,.22),transparent 60%),
   radial-gradient(45rem 28rem at 88% 22%,rgba(139,92,246,.22),transparent 60%),
   radial-gradient(40rem 26rem at 50% 92%,rgba(57,212,255,.16),transparent 60%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-40px,0) scale(1.06)}}
.grid-lines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%)}

/* HEADER */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);
  background:rgba(7,6,13,.72);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.4px;font-size:1.16rem}
.brand .dot{width:32px;height:32px;border-radius:11px;background:var(--grad);
  box-shadow:0 0 26px rgba(255,77,157,.6);position:relative}
.brand .dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#07060d}
.menu{display:flex;gap:28px;font-size:.94rem;color:var(--muted)}
.menu a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-weight:700;font-size:.95rem;border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,filter .25s;position:relative;overflow:hidden}
.btn-primary{background:var(--grad);color:#0a0714;box-shadow:0 12px 40px rgba(255,77,157,.42)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 60px rgba(178,92,255,.55)}
.btn-primary::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s infinite}
@keyframes sheen{0%{left:-120%}55%{left:130%}100%{left:130%}}
.btn-ghost{background:var(--card);border:1px solid var(--stroke);color:var(--txt)}
.btn-ghost:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.btn-lg{padding:18px 40px;font-size:1.03rem}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.5rem}

/* HERO */
.hero{padding:104px 0 84px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:url("/wp-content/uploads/2026/08/hero-bg.jpg") center/cover no-repeat;opacity:.28;
  mask-image:linear-gradient(#000 20%,transparent 96%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:var(--card);border:1px solid var(--stroke);font-size:.82rem;color:var(--muted);letter-spacing:.3px}
.pill i{width:8px;height:8px;border-radius:50%;background:#38ef7d;box-shadow:0 0 12px #38ef7d;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(2.5rem,5.6vw,4.35rem);line-height:1.03;letter-spacing:-2px;font-weight:800;margin:22px 0 20px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:hue 7s linear infinite}
@keyframes hue{to{background-position:220% 0}}
.lead{font-size:1.1rem;color:var(--muted);max-width:600px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 26px}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
.hero-art{position:relative;height:520px}
.float-card{position:absolute;border-radius:26px;overflow:hidden;border:1px solid var(--stroke);
  box-shadow:var(--shadow);animation:float 7s ease-in-out infinite}
.float-card img{height:100%;object-fit:cover;width:100%}
.fc1{width:63%;height:76%;left:0;top:6%;z-index:2}
.fc2{width:52%;height:58%;right:0;top:0;animation-delay:-2.2s}
.fc3{width:50%;height:46%;right:4%;bottom:0;animation-delay:-4.1s;z-index:3}
@keyframes float{50%{transform:translateY(-20px)}}
.badge-live{position:absolute;left:6%;bottom:2%;z-index:5;padding:12px 18px;border-radius:16px;
  background:rgba(13,10,25,.86);border:1px solid var(--stroke);backdrop-filter:blur(12px);font-size:.84rem}
.badge-live b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* MARQUEE */
.marquee{border-block:1px solid var(--stroke);background:rgba(255,255,255,.02);padding:16px 0;overflow:hidden}
.marquee-track{display:flex;gap:52px;white-space:nowrap;width:max-content;animation:slide 26s linear infinite;
  color:var(--muted);font-size:.9rem;letter-spacing:1.6px;text-transform:uppercase}
@keyframes slide{to{transform:translateX(-50%)}}

/* HEADINGS */
.eyebrow{font-size:.78rem;letter-spacing:3px;text-transform:uppercase;color:var(--pink);font-weight:700}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem);line-height:1.14;letter-spacing:-1px;font-weight:800;margin:12px 0 16px}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--muted)}

/* CARDS */
.cards{display:grid;gap:22px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:30px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s,background .35s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);border-color:rgba(255,77,157,.45);background:rgba(255,255,255,.07)}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(28rem 18rem at var(--mx,50%) var(--my,0%),rgba(255,77,157,.16),transparent 60%);pointer-events:none}
.card:hover::after{opacity:1}
.ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;
  background:var(--grad);color:#0a0714;margin-bottom:18px;box-shadow:0 10px 30px rgba(178,92,255,.35)}
.card h2{font-size:1.2rem;letter-spacing:-.3px;margin:0 0 8px}
.card p{color:var(--muted);font-size:.95rem}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat{padding:28px 16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--stroke)}
.stat b{display:block;font-size:2.2rem;font-weight:800;letter-spacing:-1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.86rem}

/* MODELS */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.model{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--stroke);
  aspect-ratio:4/5;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.model img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1);filter:saturate(1.05)}
.model:hover{transform:translateY(-10px)}
.model:hover img{transform:scale(1.09)}
.model .info{position:absolute;inset:auto 0 0 0;padding:22px;
  background:linear-gradient(transparent,rgba(6,5,12,.94) 62%)}
.model .info b{font-size:1.16rem;display:block}
.model .info span{color:var(--muted);font-size:.86rem}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.tag{font-size:.72rem;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.09);
  border:1px solid var(--stroke);color:#e9e4ff}
.model .go{position:absolute;top:16px;right:16px;padding:8px 14px;border-radius:999px;font-size:.76rem;
  background:rgba(7,6,13,.7);border:1px solid var(--stroke);backdrop-filter:blur(8px);opacity:0;transform:translateY(-6px);transition:.35s}
.model:hover .go{opacity:1;transform:none}

/* STEPS */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;padding:34px 30px 30px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--stroke)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-18px;left:26px;
  font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* CHAT DEMO */
.chat-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.phone{max-width:380px;margin-inline:auto;border-radius:38px;padding:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid var(--stroke);box-shadow:var(--shadow)}
.phone-in{background:#0b0817;border-radius:26px;padding:18px;min-height:470px;display:flex;flex-direction:column;gap:12px}
.chat-top{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--stroke)}
.chat-top img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.msg{max-width:82%;padding:12px 16px;border-radius:18px;font-size:.92rem;opacity:0;transform:translateY(12px);
  animation:pop .5s forwards}
.msg.her{background:rgba(255,255,255,.07);border:1px solid var(--stroke);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--grad);color:#0a0714;border-bottom-right-radius:6px;font-weight:600}
@keyframes pop{to{opacity:1;transform:none}}
.typing{display:flex;gap:5px;padding:14px 16px;width:64px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid var(--stroke)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-6px);background:var(--pink)}}
.checklist{list-style:none;display:grid;gap:14px;margin-top:8px}
.checklist li{display:flex;gap:12px;color:var(--muted)}
.checklist li::before{content:"✦";color:var(--pink);font-size:1.05rem;line-height:1.5}

/* PROSE */
.prose{max-width:860px;margin-inline:auto}
.prose p{color:#cfc9e6;margin-bottom:18px;font-size:1.03rem}
.prose p strong{color:#fff}

/* MOODS */
.moods{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.mood{padding:14px 24px;border-radius:999px;background:var(--card);border:1px solid var(--stroke);
  font-size:.95rem;transition:.3s;cursor:default}
.mood:hover{background:var(--grad);color:#0a0714;transform:translateY(-4px) rotate(-1.5deg);font-weight:700}

/* REVIEWS */
.review{padding:28px;border-radius:var(--radius);background:var(--card);border:1px solid var(--stroke)}
.stars{color:#ffc94d;letter-spacing:2px;margin-bottom:12px}
.who{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.88rem;color:var(--muted)}
.who span{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#0a0714;font-weight:800}

/* PLANS */
.plan{padding:34px 30px;border-radius:26px;background:var(--card);border:1px solid var(--stroke);position:relative}
.plan.top{border-color:rgba(255,77,157,.6);background:linear-gradient(180deg,rgba(255,77,157,.12),rgba(255,255,255,.04));
  transform:scale(1.03);box-shadow:0 20px 60px rgba(255,77,157,.18)}
.plan .price{font-size:2.4rem;font-weight:800;letter-spacing:-1.5px;margin:6px 0 4px}
.plan ul{list-style:none;display:grid;gap:11px;margin:20px 0 26px;color:var(--muted);font-size:.94rem}
.plan ul li::before{content:"✓ ";color:#38ef7d;font-weight:800}
.ribbon{position:absolute;top:-13px;right:22px;padding:6px 14px;border-radius:999px;background:var(--grad);
  color:#0a0714;font-size:.72rem;font-weight:800;letter-spacing:.6px}

/* FAQ */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
details{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:20px 24px;transition:.3s}
details[open]{border-color:rgba(178,92,255,.5);background:rgba(255,255,255,.07)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pink);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin-top:12px;font-size:.95rem}

/* CTA BAND */
.cta-band{text-align:center;border-radius:34px;padding:70px 32px;border:1px solid var(--stroke);
  background:linear-gradient(140deg,rgba(255,77,157,.18),rgba(139,92,246,.14),rgba(57,212,255,.12));
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,157,.35),transparent 65%);top:-240px;left:-120px;animation:drift 12s infinite alternate}

/* FOOTER */
.site-footer{border-top:1px solid var(--stroke);padding:60px 0 34px;background:rgba(255,255,255,.02)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.f-grid p{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:420px}
.f-grid ul{list-style:none;display:grid;gap:10px;color:var(--muted);font-size:.92rem;margin-top:16px}
.f-grid ul a:hover{color:#fff}
.f-title{font-weight:700;font-size:.95rem}
.copy{margin-top:42px;padding-top:22px;border-top:1px solid var(--stroke);color:var(--muted);
  font-size:.84rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* LEGAL */
.legal{padding-top:60px}
.legal .prose{max-width:900px}
.legal ol{list-style:none;margin:26px 0 0;display:grid;gap:20px}
.legal ol li{color:#cfc9e6}
.legal ol li b{color:#fff;display:block;margin-bottom:5px;font-size:1.02rem}
.updated{color:var(--muted);font-size:.9rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  .hero-grid,.chat-wrap{grid-template-columns:1fr}
  .hero-art{height:420px;order:-1}
  .c4,.stats{grid-template-columns:repeat(2,1fr)}
  .c3,.models,.steps,.f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  section{padding:70px 0}
  .menu{display:none}
  .burger{display:block}
  .menu.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:18px;
    padding:22px;background:rgba(10,8,20,.98);border-bottom:1px solid var(--stroke)}
  .c2,.c3,.c4,.models,.steps,.stats,.f-grid{grid-template-columns:1fr}
  .plan.top{transform:none}
}