:root {
  --brand: #7aa7ff;
  --brand2: #ffb86b;
  --ok: #3ddc97;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

[data-theme='dark'] {
  --bg: #0b0f19;
  --card: #121a2b;
  --card2: #0f1728;
  --text: #e8ecf6;
  --muted: #aab3c7;
  --line: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] {
  --bg: #f0f2f5;
  --card: #ffffff;
  --card2: #f9fafb;
  --text: #1f2937;
  --muted: #6b7280;
  --line: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo",
    "Noto Sans KR", Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(
      1200px 800px at 15% 10%,
      rgba(122, 167, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      900px 700px at 90% 20%,
      rgba(255, 184, 107, 0.18),
      transparent 55%
    ),
    radial-gradient(
      800px 600px at 35% 100%,
      rgba(61, 220, 151, 0.12),
      transparent 55%
    ),
    var(--bg);
  line-height: 1.5;
  transition: background 0.3s ease, color 0.3s ease;
}
    a{color:inherit; text-decoration:none}
    .container{max-width:1120px; margin:0 auto; padding:24px}
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 16px; border:1px solid var(--line); border-radius:999px;
      background: rgba(18,26,43,.55);
      backdrop-filter: blur(10px);
      position: sticky; top:16px; z-index:20;
    }
    .logo{
      display:flex; align-items:center; gap:10px;
      letter-spacing:.2px;
    }
    .logoMark{
      width:34px; height:34px; border-radius:12px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
    }
    .navLinks{display:flex; gap:14px; align-items:center; color:var(--muted); font-size:14px}
    .navLinks a{padding:8px 10px; border-radius:999px}
    .navLinks a:hover{background: rgba(255,255,255,.06); color:var(--text)}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px; border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16)}
    .btnPrimary{
      background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(255,184,107,.92));
      border-color: transparent;
      color:#0b0f19;
      font-weight:700;
    }
    .btnPrimary:hover{background: linear-gradient(135deg, rgba(122,167,255,1), rgba(255,184,107,1))}
    .hero{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:24px;
      margin-top:20px;
      align-items:stretch;
    }
    .heroCard{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(18,26,43,.55);
      box-shadow: var(--shadow);
      padding:26px;
      overflow:hidden;
      position:relative;
    }
    .badge{
      display:inline-flex; align-items:center; gap:10px;
      padding:9px 12px; border-radius:999px;
      background: rgba(255,255,255,.06);
      border:1px solid var(--line);
      color: var(--muted);
      font-size:13px;
    }
    .badgeDot{
      width:9px; height:9px; border-radius:99px;
      background: var(--ok);
      box-shadow: 0 0 0 6px rgba(61,220,151,.12);
    }
    h1{
      margin:16px 0 10px;
      font-size:42px;
      line-height:1.12;
      letter-spacing:-.6px;
      font-weight:800;
    }
    .lead{color:var(--muted); font-size:16px; margin:0 0 18px; max-width:56ch}
    .heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
    .miniRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:14px}
    .miniPill{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:999px;
      border:1px solid var(--line);
      background: rgba(15,23,40,.55);
    }
    .icon{
      width:18px; height:18px; border-radius:6px;
      background: rgba(255,255,255,.10);
      display:inline-block;
    }

    .preview{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(15,23,40,.55);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 420px;
    }
    .previewTop{
      padding:16px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between;
      color:var(--muted); font-size:13px;
    }
    .chip{
      padding:7px 10px; border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-size:12px;
    }
    .previewBody{padding:16px; display:grid; gap:12px}
    .chatBubble{
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      border-radius: 14px;
      padding:12px 12px;
      font-size:14px;
    }
    .chatQ{color:var(--text)}
    .chatA{color:var(--muted)}
    .videoMock{
      border-radius: 16px;
      border:1px solid var(--line);
      overflow:hidden;
      aspect-ratio: 16/9;
      background: #0a1020;
      position:relative;
    }
    .videoMock::after{
      content:"미리보기: 강아지 영상 답변";
      position:absolute; left:14px; bottom:12px;
      font-size:13px; color: rgba(255,255,255,.78);
      padding:8px 10px; border-radius:999px;
      background: rgba(0,0,0,.45);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(6px);
    }
    .section{
      margin-top:28px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(18,26,43,.50);
      box-shadow: var(--shadow);
      padding:22px;
    }
    .sectionTitle{
      display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
      margin-bottom:14px;
    }
    h2{
      margin:0;
      font-size:24px;
      letter-spacing:-.3px;
      font-weight:800;
    }
    .sub{margin:0; color:var(--muted); font-size:14px; max-width:70ch}
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:14px;
    }
    .feat{
      border:1px solid var(--line);
      background: rgba(15,23,40,.60);
      border-radius: 16px;
      padding:16px;
      min-height: 152px;
    }
    .featTitle{margin:8px 0 6px; font-weight:750; letter-spacing:-.2px}
    .featDesc{margin:0; color:var(--muted); font-size:14px}
    .stepRow{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
      margin-top:14px;
    }
    .step{
      border:1px solid var(--line);
      background: rgba(15,23,40,.60);
      border-radius: 16px;
      padding:16px;
      position:relative;
      overflow:hidden;
    }
    .stepNum{
      width:34px; height:34px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.08);
      border:1px solid var(--line);
      font-weight:800;
    }
    .stepTitle{margin:10px 0 6px; font-weight:750}
    .stepDesc{margin:0; color:var(--muted); font-size:14px}
    .pricing{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:12px;
      margin-top:14px;
    }
    .plan{
      border:1px solid var(--line);
      background: rgba(15,23,40,.60);
      border-radius: 16px;
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .plan.reco{
      border-color: rgba(122,167,255,.55);
      box-shadow: 0 0 0 1px rgba(122,167,255,.25), var(--shadow);
    }
    .planName{margin:0; font-size:16px; font-weight:800}
    .price{margin:10px 0 6px; font-size:28px; font-weight:900; letter-spacing:-.4px}
    .price small{font-size:14px; color:var(--muted); font-weight:600}
    .ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:14px}
    .ul li{margin:8px 0}
    .tag{
      position:absolute; top:14px; right:14px;
      padding:7px 10px; border-radius:999px;
      background: rgba(122,167,255,.15);
      border:1px solid rgba(122,167,255,.35);
      color: rgba(230,240,255,.92);
      font-size:12px;
    }

    .gallery{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:10px;
      margin-top:14px;
    }
    .shot{
      grid-column: span 4;
      border-radius: 16px;
      border:1px solid var(--line);
      overflow:hidden;
      background: rgba(0,0,0,.15);
      position:relative;
      aspect-ratio: 4/3;
    }
    .shot img{
      width:100%; height:100%;
      object-fit: cover;
      display:block;
      transform: scale(1.01);
    }
    .shot:nth-child(1){grid-column: span 5}
    .shot:nth-child(2){grid-column: span 7}
    .shot:nth-child(3){grid-column: span 4}
    .shot:nth-child(4){grid-column: span 4}
    .shot:nth-child(5){grid-column: span 4}
    .shot:nth-child(6){grid-column: span 6}
    .shot:nth-child(7){grid-column: span 6}

    .cta{
      margin-top:28px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(700px 380px at 30% 20%, rgba(122,167,255,.22), transparent 55%),
        radial-gradient(700px 380px at 80% 80%, rgba(255,184,107,.20), transparent 55%),
        rgba(18,26,43,.55);
      box-shadow: var(--shadow);
      padding:22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .cta h3{margin:0; font-size:20px; font-weight:900; letter-spacing:-.3px}
    .cta p{margin:6px 0 0; color:var(--muted); font-size:14px; max-width:75ch}
    footer{
      margin:26px 0 8px;
      color: rgba(170,179,199,.85);
      font-size:13px;
      text-align:center;
    }
    code.inline{
      padding:2px 8px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      border-radius: 999px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      color: rgba(232,236,246,.92);
    }

    @media (max-width: 980px){
      .hero{grid-template-columns: 1fr; }
      h1{font-size:36px}
      .grid3{grid-template-columns:1fr}
      .stepRow{grid-template-columns:1fr 1fr}
      .pricing{grid-template-columns:1fr}
      .shot, .shot:nth-child(1), .shot:nth-child(2), .shot:nth-child(6), .shot:nth-child(7){grid-column: span 12}
    }
    @media (max-width: 520px){
      .navLinks{display:none}
      .stepRow{grid-template-columns:1fr}
    }