:root{
    --bg: #fffaf6;
    --ink: #2b2b33;
    --muted: #656274;
    --card: #ffffff;
    --pill: #f3eee9;
    --line: #ece7e2;
    --shadow: 0 10px 30px rgba(26,24,22,0.08);
    --c1:#f9c8d2;
    --c2:#d4c7f9;
    --c3:#aee4f7;
    --c4:#c5f7d4;
    --c5:#fce9b6;
    --c6:#fbd2a7;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--ink);
    background:linear-gradient(180deg, var(--bg), var(--bg) 60%, #fff 100%);
    -webkit-font-smoothing:antialiased;
  }
  .container{width:min(1100px,92%);margin-inline:auto}
  
  /* Header */
  .header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  .logo{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 50% 30%, #ffd6cc, #f1e4fb);position:relative;box-shadow:var(--shadow)}
  .logo::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
  .brand span{font-weight:800;letter-spacing:.2px}
  .nav a{color:var(--ink);opacity:.75;text-decoration:none;margin-left:12px;padding:10px 14px;border-radius:999px;transition:.2s}
  .nav a:hover{background:var(--pill);opacity:1}
  
  /* Hero */
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:42px 0 18px;align-items:center}
  .hero h1{margin:0;font-size:clamp(2rem,6vw,54px);line-height:1.05;letter-spacing:-.02em}
  .hero p{font-size:clamp(1rem,2vw,20px);color:var(--muted);max-width:48ch;margin:16px 0 28px}
  .btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#efe7dd;border:1px solid #e7dfd6;color:#2b2b33;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
  .hero-visual{display:flex;align-items:center;justify-content:center}
  .hero-visual > div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%}
  
  /* Full-bleed background for hero; image spans viewport while content stays constrained */
  .image-bg{position:relative;z-index:0}
  .image-bg::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    height:100%;
    background:linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('wheel-of-love-hero-bg.jpg') center/cover no-repeat;
    z-index:-1;
  }
  
  /* Wheel */
.wheel{
    --c1:#c9b9ff; /* Communication */
    --c2:#ffb8c6; /* Intimacy */
    --c3:#99d6ff; /* Trust */
    --c4:#bff0d8; /* Playfulness */
    --c5:#ffe0a3; /* Growth */
    --c6:#f9c3ff; /* Kindness */
    width:min(460px,86%);
    aspect-ratio:1/1;
    border-radius:50%;
    background:conic-gradient(
      var(--c1) 0 60deg,
      var(--c2) 60deg 120deg,
      var(--c3) 120deg 180deg,
      var(--c4) 180deg 240deg,
      var(--c5) 240deg 300deg,
      var(--c6) 300deg 360deg);
    position:relative;
    box-shadow:var(--shadow)
  }
  .wheel::after{
    content:"";
    position:absolute;
    inset:14%;
    border-radius:50%;
    background:var(--bg);
    box-shadow:inset 0 0 0 1px var(--line)
  }
  
  .legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
    justify-content:center
  }
  
  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--pill);
    border:1px solid #eadfda;
    border-radius:999px;
    padding:6px 12px;
    font-size:.92rem;
    color:#5a5250
  }
  
  /* Color-coded dots for each tag */
  .tag.communication::before{background:var(--c1)}
  .tag.intimacy::before{background:var(--c2)}
  .tag.trust::before{background:var(--c3)}
  .tag.playfulness::before{background:var(--c4)}
  .tag.growth::before{background:var(--c5)}
  .tag.kindness::before{background:var(--c6)}
  
  .tag::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    box-shadow:0 0 0 1px #e6dad2 inset
  }

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);text-align:center}
  .step .icon{width:36px;height:36px;border-radius:10px;background:#f2ebe4;display:grid;place-items:center;margin:0 auto 10px}
  .step h3{margin:6px 0 8px;font-size:1.02rem}
  .step p{margin:0;color:var(--muted);font-size:.96rem}
  
  /* Features */
  .features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
  .feature{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
  .feature svg{flex:0 0 28px}
  
  /* Dual grid */
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  .card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:24px}
  
  .testimonial{display:flex;gap:14px;align-items:center}
  .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e7e1da,#f2ece6)}
  .placeholder-lines{display:grid;gap:10px;margin-top:10px}
  .placeholder-lines .line{height:10px;background:#efe8e0;border-radius:8px}
  
  .ai-card .small-wheel{width:140px;margin:0 auto 12px;display:block}
  .mood-row{display:flex;gap:8px;margin:10px auto 14px;justify-content:center}
  .mood{width:28px;height:28px;border-radius:50%;background:#efe8e0}
  .suggestion{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
  .suggestion .dot{width:8px;height:8px;border-radius:50%;background:#bdb6af;margin-top:8px}
  
  .footer{padding:40px 0 70px;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line);text-align:center}
  
  /* Responsive */
  @media (max-width: 980px){
    .hero{grid-template-columns:1fr;text-align:center}
    .hero-visual{order:-1}
    .legend{justify-content:center}
    .steps{grid-template-columns:repeat(2,1fr)}
    .features{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
    .btn-secondary{margin-inline:auto}
  }
  @media (max-width:560px){
    .steps, .features{grid-template-columns:1fr}
    .hero p{margin-inline:auto}
  }