/* ===========================================================
   Secrets AI — .de
   Design concept: an intimate late-night chat — dark, warm,
   glowing rose-to-violet accents. Built for the AI-companion
   genre: soft glows, rounded chat-bubble shapes, photo-forward
   cards, no vintage/letter motifs.
   =========================================================== */

:root{
  --bg: #150A1C;
  --bg-soft: #1D0F28;
  --card: #271433;
  --card-soft: #2E1A3B;
  --border: rgba(255,255,255,0.09);

  --rose: #B080F0;
  --rose-soft: #DFBAFF;
  --violet: #A46AEC;
  --violet-deep: #9050E8;
  --gold: #E8B975;

  --text: #F7EEF8;
  --text-muted: #CBB9D2;
  --text-dim: #9C87A6;

  --grad: linear-gradient(120deg, var(--rose), var(--violet));

  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Manrope', 'Segoe UI', sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --max: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

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

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 500;
  margin: 0 0 0.5em;
  color: var(--text);
}

h1{ font-size: clamp(2.5rem, 5.2vw, 3.8rem); line-height: 1.06; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--text-muted); max-width: 62ch; }

.center{ text-align:center; margin-left:auto; margin-right:auto; }

.eyebrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose-soft);
  margin: 0 0 0.4em;
}
.eyebrow.light{ color: var(--rose-soft); }

.section-sub{ max-width: 56ch; }
.section-sub.center{ margin-left:auto; margin-right:auto; }

/* buttons */
.btn{
  display:inline-block;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background: var(--grad); color: #1A0B24; box-shadow: 0 12px 34px -8px rgba(176,128,240,0.65); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px -6px rgba(176,128,240,0.8); }
.btn-ghost{ background: transparent; border-color: var(--rose); color: var(--rose-soft); }
.btn-ghost:hover{ background: rgba(242,120,159,0.12); }
.btn-small{ padding: 0.55em 1.2em; font-size: 0.85rem; }
.btn-large{ padding: 1em 2.2em; font-size: 1.05rem; }

/* header */
.site-header{
  background: rgba(21,10,28,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 20;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.logo{
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--text); display:flex; align-items:center; gap:10px;
}
.seal-mini{
  width: 28px; height:28px; border-radius:50%;
  background: var(--grad); color: #1A0B24;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
}
.main-nav{ display:flex; gap: 28px; }
.main-nav a{ font-size: 0.92rem; color: var(--text-muted); }
.main-nav a:hover{ color: var(--rose-soft); }
@media (max-width: 820px){ .main-nav{ display:none; } }

/* hero */
.hero{
  padding: 88px 0 50px;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(164,106,236,0.28), transparent 60%),
    radial-gradient(45% 40% at 8% 90%, rgba(176,128,240,0.18), transparent 60%);
}
.hero-inner{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
}
.hero-sub{ font-size: 1.08rem; }
.hero-note{ font-size: 0.85rem; color: var(--text-dim); margin-top: 0.8em; }
.hero-visual{ position:relative; }
.seal-frame{ position: relative; }
.hero-photo{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
}
.status-badge{
  position:absolute; top: 18px; left: 18px;
  display:flex; align-items:center; gap: 8px;
  background: rgba(21,10,28,0.75); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.status-dot{ width:8px; height:8px; border-radius:50%; background: #5CE29A; box-shadow: 0 0 0 3px rgba(92,226,154,0.25); }
.hero-note-card{
  position:absolute; left: -24px; bottom: -22px; max-width: 260px;
  background: var(--card-soft); color: var(--text);
  padding: 14px 18px; border-radius: 18px 18px 18px 4px;
  border: 1px solid var(--border);
  display:flex; gap:10px; align-items:flex-start;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.6);
}
.note-dot{ width:8px; height:8px; border-radius:50%; background: var(--rose); margin-top:6px; flex-shrink:0; }
.hero-note-card p{ margin:0; font-size: 0.88rem; font-style: italic; color: var(--text); }
@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-note-card{ left: 0; bottom: -18px; max-width: 220px; }
}

/* gallery */
.gallery{ padding: 64px 0; }
.companion-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px;
}
.companion-tile{
  position: relative;
  background: var(--card); border-radius: var(--radius);
  overflow:hidden; border: 1px solid var(--border);
}
.companion-tile img{ aspect-ratio: 3/4; object-fit: cover; background: var(--card); width: 100%; }
.tile-info{
  position: relative;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(21,10,28,0.4));
}
.tile-info h3{ margin: 0 0 4px; font-size: 1.1rem; }
.tile-info p{ margin:0; font-size: 0.86rem; }
.gallery-note{ margin-top: 30px; }
.link-inline{ color: var(--rose-soft); border-bottom: 1px solid var(--rose-soft); }
@media (max-width: 820px){ .companion-grid{ grid-template-columns: repeat(2,1fr); } }

/* steps */
.steps{ padding: 20px 0 64px; background: var(--bg-soft); }
.steps-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 40px; }
.step{ padding: 26px 24px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 34px; height:34px; border-radius:50%;
  background: var(--grad); color: #1A0B24;
  font-family: var(--serif); font-style:italic; font-weight: 700; margin-bottom: 14px;
}
@media (max-width: 820px){ .steps-row{ grid-template-columns:1fr; } }

/* capabilities */
.capabilities{ background: var(--bg); padding: 72px 0; }
.capabilities h2, .capabilities h3{ color: var(--text); }
.capabilities p, .capabilities .section-sub{ color: var(--text-muted); }
.cap-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 46px; }
.cap-card{ padding: 26px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.cap-icon{
  width: 40px; height:40px; margin-bottom: 16px; padding: 8px;
  border-radius: 12px; background: var(--grad); color: #1A0B24;
}
.cap-icon svg{ width:100%; height:100%; stroke: currentColor; }
@media (max-width: 900px){ .cap-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cap-grid{ grid-template-columns: 1fr; } }

/* stats */
.stats-band{ background: var(--grad); padding: 44px 0; }
.stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align:center; }
.stat-num{ font-family: var(--serif); font-size: 2.4rem; color: #1A0B24; margin: 0; }
.stat-label{ color: #2B1233; font-size: 0.9rem; margin: 4px 0 0; max-width: none; font-weight: 600; }
@media (max-width: 700px){ .stats-grid{ grid-template-columns:1fr; } }

/* audience */
.audience{ padding: 72px 0; }
.audience-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 40px; }
.audience-card{ padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.audience-card h3{ font-size: 1.05rem; }
.audience-card p{ font-size: 0.9rem; }
@media (max-width: 900px){ .audience-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .audience-grid{ grid-template-columns: 1fr; } }

/* trust */
.trust{ padding: 72px 0; background: var(--bg-soft); }
.trust-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }
.trust-list{ list-style:none; padding:0; margin: 22px 0 0; }
.trust-list li{
  padding: 12px 0 12px 26px; position:relative; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.95rem;
}
.trust-list li::before{
  content:''; position:absolute; left:0; top: 18px; width:10px; height:10px;
  border-radius:50%; background: var(--grad);
}
.trust-visual{ background: var(--card); border-radius: var(--radius); padding: 8px 24px; border: 1px solid var(--border); }
.trust-visual .row{ display:flex; justify-content:space-between; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.trust-visual .row:last-child{ border-bottom:none; }
.trust-visual .row span:first-child{ color: var(--text-muted); }
.trust-visual .row span:last-child{ color: var(--rose-soft); font-weight: 700; }
@media (max-width: 860px){ .trust-inner{ grid-template-columns:1fr; } }

/* pricing */
.pricing{ padding: 72px 0 40px; }
.price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.price-card{
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; background: var(--card); display:flex; flex-direction:column;
}
.price-card.highlight{ background: linear-gradient(160deg, var(--violet-deep), #3A1A52); border-color: transparent; box-shadow: 0 20px 40px -18px rgba(155,93,229,0.5); }
.price-card.highlight .price-name{ color: var(--text); }
.price-card.highlight .price-amount{ color: var(--rose-soft); }
.price-name{ font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; color: var(--text); }
.price-amount{ font-size: 2rem; font-family: var(--serif); margin: 0 0 10px; color: var(--rose-soft); }
.price-amount span{ font-size: 0.9rem; color: var(--text-dim); }
.price-desc{ font-size: 0.85rem; margin-bottom: 16px; }
.price-list{ list-style:none; padding:0; margin: 0 0 22px; flex-grow:1; }
.price-list li{
  font-size: 0.85rem; padding: 7px 0 7px 20px; position:relative; color: var(--text-muted);
}
.price-list li::before{ content:'♥'; position:absolute; left:0; color: var(--rose); font-size: 0.75rem; }
.price-card .btn{ text-align:center; }
.price-card.save{ border-color: var(--gold); }
.price-card.save .price-amount{ color: var(--gold); }
@media (max-width: 780px){ .price-grid{ grid-template-columns: 1fr; } }

.compare-table-wrap{ margin-top: 54px; overflow-x:auto; }
.compare-table{ width:100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td{
  text-align:left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.88rem;
  color: var(--text-muted);
}
.compare-table th{ font-family: var(--serif); font-size: 1rem; color: var(--text); }
.compare-table td.yes{ color: var(--rose-soft); font-weight:700; }

/* testimonials */
.testimonials{ padding: 72px 0; background: var(--bg-soft); }
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.testimonial-grid blockquote{ margin:0; padding: 24px; background: var(--card); border-radius: var(--radius); border-left: 3px solid var(--rose); }
.testimonial-grid p{ font-style: italic; font-size: 0.95rem; margin-bottom: 14px; color: var(--text); }
.testimonial-grid cite{ font-size: 0.82rem; color: var(--rose-soft); font-style: normal; }
@media (max-width: 860px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* faq */
.faq{ padding: 72px 0; }
.faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; margin-top: 40px; }
.faq-item h3{ font-size: 1.05rem; }
.faq-item p{ font-size: 0.92rem; }
@media (max-width: 780px){ .faq-grid{ grid-template-columns: 1fr; } }

/* final CTA */
.cta-final{ background: var(--grad); padding: 80px 0; text-align:center; }
.cta-final h2{ color: #1A0B24; max-width: 24ch; margin: 0 auto 0.5em; }
.cta-final p{ color: #3A1F44; margin: 0 auto 26px; }
.cta-final .btn-primary{ background: #1A0B24; color: var(--text); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
.cta-final .hero-note{ color: #3A1F44; }

/* footer */
.site-footer{ background: #0F0715; padding: 34px 0; }
.footer-inner{ display:flex; flex-direction:column; gap: 16px; align-items:center; text-align:center; }
.footer-inner .logo{ color: var(--text); }
.footer-nav{ display:flex; gap: 22px; }
.footer-nav a{ color: var(--text-dim); font-size: 0.85rem; }
.footer-nav a:hover{ color: var(--rose-soft); }
.footer-fine{ color: var(--text-dim); font-size: 0.78rem; max-width: 60ch; margin:0; }

/* steps — two-column with photo */
.steps-inner{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items:start; }
.steps-visual{ position: sticky; top: 100px; }
.steps-photo{
  width:100%; aspect-ratio: 4/5; object-fit:cover; background: var(--card);
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}
.steps-list .eyebrow, .steps-list h2{ text-align:left; margin-left:0; }
.steps-list .step{ margin-top: 18px; }
@media (max-width: 860px){ .steps-inner{ grid-template-columns: 1fr; } .steps-visual{ position:static; max-width: 320px; margin: 0 auto; } }

/* differentiator / comparison section */
.differentiator{ padding: 72px 0; background: var(--bg-soft); }
.differentiator-inner{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items:start; }
.differentiator-visual{ position: sticky; top: 100px; }
.differentiator-photo{
  width:100%; aspect-ratio: 4/5; object-fit:cover; background: var(--card);
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}
.differentiator .compare-table-wrap{ margin-top: 30px; }
@media (max-width: 860px){ .differentiator-inner{ grid-template-columns: 1fr; } .differentiator-visual{ position:static; order:-1; max-width: 320px; margin: 0 auto; } }

/* audience — with photo */
.audience-inner{ display:grid; grid-template-columns: 1.25fr 0.75fr; gap: 50px; align-items:start; }
.audience-main .eyebrow, .audience-main h2, .audience-main .section-sub{ text-align:left; margin-left:0; }
.audience-visual{ position: sticky; top: 100px; }
.audience-photo{
  width:100%; aspect-ratio: 4/5; object-fit:cover; background: var(--card);
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}
@media (max-width: 900px){ .audience-inner{ grid-template-columns: 1fr; } .audience-visual{ position:static; order:-1; max-width: 320px; margin: 0 auto; } }

.hero-inner > *,
.steps-inner > *,
.differentiator-inner > *,
.audience-inner > *,
.trust-inner > * { min-width: 0; }
.cta-mid{ background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 34px 0; }
.cta-mid-inner{ display:flex; align-items:center; justify-content:center; gap: 22px; flex-wrap: wrap; text-align:center; }
.cta-mid-inner p{ margin:0; font-family: var(--serif); font-size: 1.25rem; color: var(--text); }