/* ════════════════════════════════════════════════════════════════════
   PALETTE: midnight black + electric purple + hot pink
   ═════════════════════════════════════════════════════════════════ */
:root{
  --bg:#06030d;
  --bg-2:#0c0518;
  --bg-3:#120a26;
  --surface:#150a2c;
  --surface-2:#1d0e3d;
  --surface-3:#27154f;

  --line:rgba(168,85,247,.14);
  --line-strong:rgba(236,72,153,.30);

  --text:#f7f0ff;
  --text-2:#e7d8ff;
  --muted:#b4a5d9;
  --muted-2:#7a6aa3;

  /* electric purple */
  --accent:#a855f7;
  --accent-2:#c084fc;
  --accent-3:#7c3aed;
  --accent-soft:rgba(168,85,247,.18);

  /* hot pink */
  --warm:#ec4899;
  --warm-2:#f472b6;
  --warm-soft:rgba(236,72,153,.18);

  --glow-purple:rgba(168,85,247,.55);
  --glow-pink:rgba(236,72,153,.55);

  --shadow-soft:0 8px 30px -10px var(--glow-purple);
  --shadow-card:0 18px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(168,85,247,.10);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
}

/* === CHAT widget palette (matches new dark theme) === */
:root{
  --sup-bg:#0c0518;
  --sup-text:#f7f0ff;
  --sup-muted:#b4a5d9;
  --sup-accent:#a855f7;
  --sup-accent-2:#ec4899;
  --sup-msg-bg:#1d0e3d;
  --sup-hint-bg:#150a2c;
  --sup-input-bg:#0c0518;
  --sup-line:rgba(168,85,247,.22);
}

/* ════════════════════════════════════════════════════════════════════
   BODY + GLOBAL — pure black with subtle aurora gradient
   ═════════════════════════════════════════════════════════════════ */
html,body{background:var(--bg);color:var(--text)}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(236,72,153,.14), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
*{scrollbar-color:#a855f7 #0c0518}
::selection{background:rgba(236,72,153,.45);color:#fff}

/* ════════════════════════════════════════════════════════════════════
   HEADER (.hdr) — sticky black with neon underline
   ═════════════════════════════════════════════════════════════════ */
header.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(6,3,13,.85) !important;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 0 rgba(168,85,247,.14), 0 18px 36px -28px rgba(168,85,247,.50);
}
.hdr-row{height:72px}
.logo{color:var(--text) !important; text-shadow:0 0 18px rgba(168,85,247,.35)}
.logo-mark{
  background:linear-gradient(135deg,var(--accent) 0%, var(--warm) 100%) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(168,85,247,.55), inset 0 0 12px rgba(236,72,153,.4);
}
.nav a{color:var(--muted) !important}
.nav a:hover{
  background:linear-gradient(90deg, var(--accent-soft), var(--warm-soft)) !important;
  color:#fff !important;
}
.hdr-actions .btn-ghost{
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
  background:rgba(168,85,247,.06) !important;
}
.hdr-actions .btn-ghost:hover{
  border-color:var(--accent) !important; color:#fff !important;
  background:linear-gradient(90deg, rgba(168,85,247,.20), rgba(236,72,153,.20)) !important;
  box-shadow:0 0 20px rgba(168,85,247,.45);
}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — purple→pink gradient with glow
   ═════════════════════════════════════════════════════════════════ */
.btn-primary{
  background:linear-gradient(95deg, var(--accent) 0%, var(--accent-3) 35%, var(--warm) 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 8px 26px -6px var(--glow-purple), 0 0 0 1px rgba(255,255,255,.06) !important;
}
.btn-primary:hover{
  background:linear-gradient(95deg, var(--accent-2) 0%, var(--accent) 35%, var(--warm-2) 100%) !important;
  box-shadow:0 14px 38px -10px var(--glow-pink), 0 0 0 1px rgba(255,255,255,.10) !important;
  transform:translateY(-1px);
  color:#fff !important;
}
.btn-ghost{
  background:rgba(255,255,255,.02) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--text) !important;
}
.btn-ghost:hover{
  border-color:var(--warm) !important;
  color:#fff !important;
  background:linear-gradient(90deg,var(--accent-soft),var(--warm-soft)) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HERO + section + cards
   ═════════════════════════════════════════════════════════════════ */
.hero h1{color:var(--text)}
.hero h1 em{
  background:linear-gradient(95deg, var(--accent-2), var(--warm)) ;
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  text-shadow:0 0 28px rgba(236,72,153,.30);
  font-style:italic;
}
.hero-kicker{color:var(--warm) !important; letter-spacing:.18em; text-transform:uppercase; font-size:12px}
.hero-lead{color:var(--muted)}
.hero-stats .stat .num{color:var(--accent-2) !important; text-shadow:0 0 16px rgba(192,132,252,.35)}
.hero-stats{border-top-color:var(--line) !important}






.section-title h2{color:var(--text)}
.section-title p{color:var(--muted)}

/* generic cards / panels */
.card,.panel,.feature,.step,.faq-item,.testimonial,.note,.box,.tarif,.plan,.tier{
  background:linear-gradient(180deg,rgba(29,14,61,.55),rgba(12,5,24,.72)) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  box-shadow:var(--shadow-card);
}
.card:hover,.feature:hover,.tarif:hover,.plan:hover,.tier:hover{
  border-color:var(--accent) !important;
  box-shadow:0 22px 60px -22px var(--glow-purple), 0 0 0 1px rgba(168,85,247,.30) !important;
  transform:translateY(-2px);
  transition:all .25s ease;
}

/* lists / features icons */
.feature .icon,.feat-ico,.step .num,.step-num{
  background:linear-gradient(135deg,var(--accent),var(--warm)) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(168,85,247,.40);
}

/* ════════════════════════════════════════════════════════════════════
   FORMS (login/register/profile)
   ═════════════════════════════════════════════════════════════════ */
input,textarea,select{
  background:rgba(12,5,24,.85) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--warm) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(236,72,153,.18) !important;
}
label,.muted,.hint,small,.note{color:var(--muted)}

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════ */
footer{
  background:linear-gradient(180deg, transparent, rgba(12,5,24,.7) 30%, var(--bg) 100%) !important;
  border-top:1px solid var(--line) !important;
  color:var(--muted);
}
footer a{color:var(--text-2)}
footer a:hover{color:var(--warm)}
footer h4{color:var(--text); letter-spacing:.04em}

/* ════════════════════════════════════════════════════════════════════
   ANCHOR / LINK base
   ═════════════════════════════════════════════════════════════════ */
a{color:var(--accent-2)}
a:hover{color:var(--warm)}

/* mobile tweaks */
@media (max-width:780px){
  header.hdr{background:rgba(6,3,13,.95) !important}
  .hdr-row{height:64px}
  .nav{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   END override
   ═════════════════════════════════════════════════════════════════ */
/* RoomLove — light warm theme, card grid layout */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none;color:var(--accent)}
button{font:inherit;cursor:pointer}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== HEADER ===== */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(255,248,243,.92); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:.3px;color:var(--text)}
.logo-mark{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--warm) 100%);
  display:grid;place-items:center;color:#fff;
  box-shadow:var(--shadow-soft);
}
.nav{display:flex;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:14px;padding:8px 14px;border-radius:999px;transition:all .15s}
.nav a:hover{background:var(--accent-soft);color:var(--accent)}
.hdr-actions{display:flex;gap:10px;align-items:center}

/* ===== BTN ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:999px;
  font-weight:600;font-size:14px;border:1.5px solid transparent;
  transition:all .15s;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-soft)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 14px 40px -10px var(--glow-pink);color:#fff}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{height:52px;padding:0 28px;font-size:15px}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ===== HERO ===== */
.hero{padding:80px 0 60px;position:relative;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;background:var(--accent-soft);border-radius:999px;
  font-size:13px;color:var(--accent);font-weight:600;margin-bottom:22px;
}
.hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.02em;
  margin-bottom:22px;
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-lead{font-size:18px;color:var(--muted);max-width:520px;margin-bottom:32px;line-height:1.55}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:480px;padding-top:28px;border-top:1px solid var(--line)}
.hero-stats .stat .num{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;color:var(--accent)}
.hero-stats .stat .lbl{font-size:13px;color:var(--muted);margin-top:2px}

/* hero-art */
.hero-art{
  position:relative; aspect-ratio:1/1;max-width:480px;margin-left:auto;
  background:linear-gradient(135deg,var(--accent-soft),#fff3eb);
  border-radius:var(--radius-lg);
  display:grid;place-items:center;
  overflow:hidden;
}










/* ===== SECTION ===== */
section{padding:64px 0}
.section-title{text-align:center;margin-bottom:48px}
.section-title .kicker{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--accent)}
.section-title h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.01em;margin-top:8px}
.section-title p{color:var(--muted);font-size:17px;margin-top:10px;max-width:600px;margin-left:auto;margin-right:auto}

/* ===== CARDS GRID (как 4 принципа) ===== */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cards-grid{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 22px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--accent-soft)}
.card-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:16px;
}
.card h3{font-size:18px;font-weight:600;margin-bottom:8px}
.card p{color:var(--muted);font-size:14px;line-height:1.55}

/* ===== HOW (3 шага по горизонтали) ===== */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
@media (max-width:760px){.how-steps{grid-template-columns:1fr;gap:24px}}
.how-step{position:relative;padding-left:80px}
.how-step .num{
  position:absolute;left:0;top:0;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--warm));
  color:#fff;display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;
}
.how-step h3{font-size:18px;font-weight:600;margin-bottom:8px}
.how-step p{color:var(--muted);font-size:14px;line-height:1.55}

/* ===== TESTIMONIAL (большой блок) ===== */
.tst{
  background:linear-gradient(135deg,var(--accent-soft) 0%,#fff3eb 100%);
  border-radius:var(--radius-lg);
  padding:56px 40px;
  text-align:center;
}
.tst-quote{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(22px,2.4vw,28px);font-style:italic;line-height:1.5;max-width:760px;margin:0 auto 24px;color:var(--text)}
.tst-author{display:flex;flex-direction:column;align-items:center;gap:4px}
.tst-ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--warm));display:grid;place-items:center;color:#fff;font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;margin-bottom:8px}
.tst-name{font-weight:600;font-size:15px}
.tst-meta{color:var(--muted);font-size:13px}

/* ===== FAQ ===== */
.faq{display:grid;gap:12px;max-width:780px;margin:0 auto}
.faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px;transition:border-color .2s;
}
.faq details[open]{border-color:var(--accent-soft)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:20px;font-weight:300;transition:transform .2s}
.faq details[open] summary::after{content:'−'}
.faq p{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.6}

/* ===== CTA ===== */
.cta-block{
  background:linear-gradient(135deg,var(--accent) 0%,var(--warm) 100%);
  color:#fff;border-radius:var(--radius-lg);
  padding:56px 32px;text-align:center;
}
.cta-block h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,3.4vw,40px);margin-bottom:14px;color:#fff}
.cta-block p{opacity:.92;max-width:520px;margin:0 auto 24px;font-size:16px;color:#fff}
.cta-block .btn-primary{background:#fff;color:var(--accent)}
.cta-block .btn-primary:hover{background:#fff;color:var(--accent-2)}

/* ===== FOOTER ===== */
.ftr{margin-top:48px;border-top:1px solid var(--line);padding:40px 0 24px;color:var(--muted);background:var(--surface-2)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:24px}
@media (max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text);margin-bottom:14px;font-weight:600}
.ftr ul{list-style:none}
.ftr li{margin-bottom:8px;font-size:14px}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--accent)}
.ftr-bottom{padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px}

/* ===== FORM PAGE ===== */
.form-page{
  max-width:480px;margin:60px auto;padding:36px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.form-page h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;margin-bottom:8px;color:var(--text)}
.form-page p.lead{font-size:15px;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.field input,.field select{
  width:100%;height:48px;padding:0 16px;
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:15px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.field .hint{font-size:12px;color:var(--muted-2);margin-top:6px}
.checks{margin:18px 0 22px;font-size:13px;display:flex;flex-direction:column;gap:10px}
.checks label{display:flex;gap:10px;color:var(--muted);line-height:1.4;cursor:pointer}
.checks a{color:var(--accent);text-decoration:underline}
.form-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:14px}
.form-foot a{color:var(--accent);font-weight:600}
.alert{padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px}
.alert-error{background:#fdeeec;color:#c0392b;border:1px solid #f5c5bf}
.alert-ok{background:#eaf7ee;color:#1f7a3a;border:1px solid #bfe4c8}

/* ===== UTIL ===== */
.muted{color:var(--muted)}
.small{font-size:13px}
.needs-js{display:none!important}
.needs-js.no-js-clean{display:initial!important}

/* ===== CONTACTS PAGE ===== */
.contacts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px}
@media (max-width:700px){.contacts-grid{grid-template-columns:1fr}}
.c-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.c-block h3{font-size:17px;margin-bottom:10px;font-weight:600}
.c-block p{color:var(--muted);font-size:14px;line-height:1.55}
.c-block strong{color:var(--text)}

/* ===== chat widget themed for RoomLove ===== */
/* chat widget — dark purple theme */

/* === bio block on profile page === */
.bio-card{
  background:linear-gradient(180deg,rgba(29,14,61,.55),rgba(12,5,24,.72));
  border:1px solid rgba(168,85,247,.18);
  border-radius:16px;
  padding:22px 24px;
  box-shadow:0 18px 40px -22px rgba(168,85,247,.55);
}
.bio-head h3{color:#f7f0ff}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.bio-row{display:flex;flex-direction:column;gap:6px}
.bio-row-full{grid-column:1/-1}
.bio-row label{font-size:13px;color:#b4a5d9;letter-spacing:.02em}
.bio-row input,.bio-row textarea{
  width:100%; padding:11px 14px;
  background:#0c0518; color:#f7f0ff;
  border:1px solid rgba(168,85,247,.20); border-radius:10px;
  font:inherit; transition:all .15s;
}
.bio-row input:focus,.bio-row textarea:focus{
  border-color:#ec4899; outline:0;
  box-shadow:0 0 0 3px rgba(236,72,153,.18);
}
.bio-row textarea{resize:vertical;min-height:80px}
@media (max-width:680px){
  .bio-grid{grid-template-columns:1fr}
}
.alert{padding:10px 14px;border-radius:10px;background:rgba(236,72,153,.12);border:1px solid rgba(236,72,153,.28);color:#ffd2e8;font-size:14px}



/* ════════════════════════════════════════════════════════════════════
   HERO PHONE — clean, dynamic, no clipping
   ═════════════════════════════════════════════════════════════════ */
.hero{overflow:visible !important}
.hero-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:620px;
  overflow:visible;
  background:transparent !important;
  padding:0 !important;
}
.hero-art > *:not(.phone-mockup){display:none !important}

.phone-mockup{
  position:relative;
  width:300px; height:600px;
  animation:phFloat 6s ease-in-out infinite;
  transform-origin:center center;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
@keyframes phFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-14px) rotate(1deg)}
}

/* мягкое сияние ПОД телефоном — не сбоку, не свечит за пределы карточки */
.phone-mockup::before{
  content:"";
  position:absolute;
  left:50%; top:60%;
  width:78%; height:30%;
  transform:translate(-50%,0);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(168,85,247,.55) 0%, rgba(236,72,153,.30) 40%, transparent 70%);
  filter:blur(28px);
  z-index:-1;
  animation:phGlow 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes phGlow{
  0%,100%{opacity:.7; transform:translate(-50%,0) scale(1)}
  50%    {opacity:1; transform:translate(-50%,4px) scale(1.06)}
}

/* убираем старый внешний glow */
.phone-glow{display:none !important}

.phone-frame{
  position:relative;
  width:100%; height:100%;
  border-radius:46px;
  background:linear-gradient(155deg,#1a0f33 0%, #0a0418 100%);
  padding:14px 12px;
  box-shadow:
    0 0 0 2px rgba(168,85,247,.30),
    inset 0 0 30px rgba(168,85,247,.10),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.phone-mockup:hover{animation-play-state:paused}
.phone-mockup:hover .phone-frame{transform:scale(1.04)}
.phone-frame::after{
  /* блик-отражение по диагонали */
  content:"";
  position:absolute; inset:0;
  border-radius:46px;
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 35%, transparent 65%, rgba(236,72,153,.06) 100%);
  pointer-events:none;
}
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:118px; height:24px; border-radius:14px;
  background:#06030d; z-index:5;
}
.phone-notch::after{
  content:""; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle, #2a1745 30%, #06030d 70%);
  box-shadow:0 0 0 1px rgba(168,85,247,.30);
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:34px;
  background:
    radial-gradient(800px 400px at 20% -10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(600px 300px at 110% 110%, rgba(236,72,153,.16), transparent 60%),
    #0c0518;
  overflow:hidden;
  display:flex; flex-direction:column;
  font-family:'Manrope',-apple-system,sans-serif;
  color:#f7f0ff;
}

/* — top bar — */
.ph-bar{
  display:flex; align-items:center; gap:10px;
  padding:36px 14px 12px;
  border-bottom:1px solid rgba(168,85,247,.12);
  background:linear-gradient(180deg, rgba(168,85,247,.06), transparent);
}
.ph-back{
  width:30px; height:30px; border-radius:50%;
  background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.18);
  color:#c084fc; display:grid; place-items:center; padding:0;
}
.ph-peer{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.ph-ava{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, #a855f7, #ec4899);
  display:grid; place-items:center;
  color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 0 14px rgba(168,85,247,.45);
  font-family:'Cormorant Garamond', Georgia, serif;
  letter-spacing:.5px;
}
.ph-meta{min-width:0; line-height:1.15}
.ph-name{font-size:14px; font-weight:600; color:#f7f0ff}
.ph-online{font-size:11px; color:#b4a5d9; display:flex; align-items:center; gap:5px; margin-top:1px}
.ph-online .dot{
  width:6px; height:6px; border-radius:50%;
  background:#34d399; box-shadow:0 0 8px #34d399;
  animation:phPulse 2s ease-in-out infinite;
}
@keyframes phPulse{0%,100%{opacity:1}50%{opacity:.45}}
.ph-actions{color:#c084fc; opacity:.8}

/* — day separator — */
.ph-day{
  align-self:center;
  font-size:11px; color:#7a6aa3;
  text-transform:lowercase; letter-spacing:.05em;
  padding:10px 0 4px;
}

/* — chat — */
.ph-msgs{
  flex:1; overflow:hidden;
  padding:6px 12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.ph-msg{display:flex; flex-direction:column; max-width:78%; opacity:0}
.ph-msg.in {align-self:flex-start}
.ph-msg.out{align-self:flex-end; align-items:flex-end}
.ph-msg:nth-child(1){animation:phIn .5s .15s ease both}
.ph-msg:nth-child(2){animation:phIn .5s .55s ease both}
.ph-msg:nth-child(3){animation:phIn .5s .95s ease both}
.ph-msg:nth-child(4){animation:phIn .5s 1.35s ease both}
.ph-msg:nth-child(5){animation:phIn .5s 1.75s ease both}
.ph-bubble{
  padding:9px 13px;
  border-radius:18px;
  font-size:13px; line-height:1.4;
  word-wrap:break-word;
}
.ph-msg.in  .ph-bubble{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(168,85,247,.18);
  color:#f7f0ff;
  border-bottom-left-radius:6px;
}
.ph-msg.out .ph-bubble{
  background:linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #ec4899 100%);
  color:#fff;
  border-bottom-right-radius:6px;
  box-shadow:0 6px 18px -4px rgba(236,72,153,.45);
}
.ph-time{
  font-size:10px; color:#7a6aa3;
  margin-top:3px; padding:0 4px;
}
.ph-typing{
  display:inline-flex; gap:4px; align-items:center;
  padding:11px 15px;
}
.ph-typing span{
  width:6px; height:6px; border-radius:50%;
  background:#c084fc;
  animation:phDot 1.2s infinite ease-in-out;
}
.ph-typing span:nth-child(2){animation-delay:.18s}
.ph-typing span:nth-child(3){animation-delay:.36s}
@keyframes phDot{
  0%,80%,100%{transform:scale(.55); opacity:.45}
  40%{transform:scale(1); opacity:1}
}
@keyframes phIn{
  from{opacity:0; transform:translateY(8px)}
  to  {opacity:1; transform:translateY(0)}
}

/* — input — */
.ph-input{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 16px;
  border-top:1px solid rgba(168,85,247,.10);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}
.ph-field{
  flex:1; height:34px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(168,85,247,.16);
  color:#7a6aa3;
  display:flex; align-items:center; padding:0 14px;
  font-size:12px;
}
.ph-send{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, #a855f7, #ec4899);
  color:#fff; border:0; padding:0;
  display:grid; place-items:center;
  box-shadow:0 6px 16px -4px rgba(236,72,153,.55);
  cursor:default;
}

/* — responsive — телефон всегда виден целиком */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr !important}
  .hero-art{min-height:560px}
  .phone-mockup{transform:none}
}
@media (max-width:480px){
  .phone-mockup{width:260px; height:520px}
}