:root{
    --bg:#ffffff;
    --bg2:#fbfaf7;
    --ink:#111827;
    --muted:#5b6473;
    --line:rgba(17,24,39,.10);
    --shadow:0 12px 30px rgba(17,24,39,.08);
    --shadow2:0 8px 20px rgba(17,24,39,.06);
    --radius:18px;
    --max:980px;
    --accent:#3b82f6;
    --accent2:#8b5cf6;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    background:
      radial-gradient(900px 420px at 20% 10%, rgba(59,130,246,.10), transparent 60%),
      radial-gradient(800px 380px at 80% 0%, rgba(139,92,246,.10), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg2));
    color:var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  a{color:inherit}
  .wrap{max-width:var(--max); margin:0 auto; padding:26px 18px 70px}
  
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 4px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em}
  .logo{
    width:36px; height:36px; border-radius:12px;
    background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(139,92,246,.18));
    border:1px solid rgba(17,24,39,.10);
    display:grid; place-items:center;
    box-shadow:var(--shadow2);
  }
  .logo span{font-size:18px}
  nav{display:flex; gap:10px; font-size:14px; color:var(--muted); flex-wrap:wrap; justify-content:flex-end}
  nav a{text-decoration:none; padding:8px 10px; border-radius:10px}
  nav a:hover{background:rgba(17,24,39,.04); color:var(--ink)}
  
  .card{
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(255,255,255,.78);
    box-shadow:var(--shadow2);
    padding:22px;
  }
  .hero{
    border:1px solid var(--line);
    border-radius:26px;
    background:rgba(255,255,255,.75);
    box-shadow:var(--shadow);
    padding:26px;
    position:relative;
    overflow:hidden;
  }
  .hero:before{
    content:"";
    position:absolute;
    inset:-140px auto auto -160px;
    width:520px; height:520px;
    background:radial-gradient(circle at 30% 30%, rgba(59,130,246,.14), transparent 60%);
    transform:rotate(10deg);
    pointer-events:none;
  }
  .hero:after{
    content:"";
    position:absolute;
    inset:-170px -170px auto auto;
    width:560px; height:560px;
    background:radial-gradient(circle at 30% 30%, rgba(139,92,246,.12), transparent 60%);
    transform:rotate(-12deg);
    pointer-events:none;
  }
  
  .kicker{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.70);
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    color:var(--muted);
  }
  .kicker b{color:var(--ink)}
  
  h1{
    position:relative;
    margin:14px 0 8px;
    font-size: clamp(30px, 4.5vw, 44px);
    line-height:1.08;
    letter-spacing:-.02em;
    font-family: "Fraunces", serif;
    font-weight:650;
  }
  h2{
    margin:18px 0 10px;
    font-size:20px;
    letter-spacing:-.01em;
    font-family: "Fraunces", serif;
    font-weight:650;
  }
  p{color:var(--muted); line-height:1.7; margin:10px 0}
  ul{color:var(--muted); line-height:1.85}
  li{margin:2px 0}
  
  .tags{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 10px}
  .tag{
    border:1px solid var(--line);
    background:rgba(255,255,255,.70);
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    color:var(--muted);
    box-shadow:0 1px 0 rgba(17,24,39,.03);
  }
  
  .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    margin-top:14px;
  }
  
  .ctaRow{
    display:flex; gap:12px; flex-wrap:wrap;
    margin-top:10px;
    align-items:stretch;
    position:relative;
  }
  .input{
    flex:1 1 280px;
    display:flex;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.78);
    box-shadow:0 1px 0 rgba(17,24,39,.03);
  }
  input{
    width:100%;
    padding:14px 14px;
    border:0; outline:0;
    background:transparent;
    color:var(--ink);
    font-size:15px;
  }
  input::placeholder{color:rgba(91,100,115,.75)}
  button{
    border:0;
    border-radius:16px;
    padding:13px 16px;
    font-size:15px;
    cursor:pointer;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    color:white;
    font-weight:700;
    box-shadow:0 10px 22px rgba(59,130,246,.18);
    transition:transform .08s ease, filter .1s ease;
    white-space:nowrap;
  }
  button:hover{filter:brightness(.98)}
  button:active{transform:translateY(1px)}
  
  .note{
    margin-top:12px;
    color:rgba(91,100,115,.95);
    font-size:13px;
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .mini{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.70);
    padding:7px 10px;
    border-radius:999px;
  }
  .ok{margin-top:10px; color:#0f766e; font-size:13px; display:none}
  .err{margin-top:10px; color:#b91c1c; font-size:13px; display:none}
  
  .breadcrumbs{
    margin: 8px 0 0;
    color: rgba(91,100,115,.95);
    font-size: 13px;
  }
  .breadcrumbs a{color: rgba(59,130,246,.95); text-decoration:none}
  .breadcrumbs a:hover{text-decoration:underline}
  
  footer{
    margin-top:18px;
    color:rgba(91,100,115,.95);
    font-size:13px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:10px 6px;
  }
  
  @media (max-width: 820px){
    nav{display:none}
    .grid{grid-template-columns: 1fr}
  }