/* sing.io - design system generated by DomainMagic (https://domainmagic.com)
   Reuse: copy the DESIGN TOKENS block, then lift the sections you need. */
/* ===== DESIGN TOKENS - colours & fonts. Copy this block first when reusing the design. ===== */
:root {
      --ink:#100d27;
      --night:#09071c;
      --deep:#15103a;
      --paper:#fff9ef;
      --cream:#f7eddc;
      --violet:#7357ff;
      --hot:#ff527d;
      --aqua:#65e5d0;
      --yellow:#ffd166;
      --muted:#514a68;
      --line:rgba(16,13,39,.16);
      --display:"Syne", sans-serif;
      --body:"DM Sans", sans-serif;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:var(--body);
      overflow-x:hidden;
    }
    a { color:inherit; }
    .shell { width:min(1160px, calc(100% - 40px)); margin:auto; }
    

/* ===== LABELS - small wide-tracked uppercase ===== */
.eyebrow {
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--aqua);
      font:700 11px/1 var(--body);
      letter-spacing:.19em;
      text-transform:uppercase;
    }
    .eyebrow:before {
      content:"";
      display:block;
      width:27px;
      height:3px;
      background:var(--hot);
      transform:skew(-28deg);
    }
    h1,h2,h3,p { margin-top:0; }
    h1,h2,h3 { font-family:var(--display); letter-spacing:-.055em; }
    h2 { font-size:clamp(2.3rem, 5vw, 4.7rem); line-height:.96; max-width:760px; margin-bottom:22px; }
    h3 { font-size:1.3rem; line-height:1.05; margin-bottom:10px; }
    p { line-height:1.65; }
    

/* ===== HERO ===== */
.hero {
      position:relative;
      isolation:isolate;
      min-height:78vh;
      color:#fff;
      background-image:linear-gradient(90deg, rgba(8,5,28,.94) 0%, rgba(11,7,36,.84) 45%, rgba(11,7,36,.55) 100%), url("../assets/hero.jpg");
      background-size:cover;
      background-position:center;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .hero:after {
      content:"";
      position:absolute;
      z-index:-1;
      width:560px;
      height:560px;
      right:-150px;
      bottom:-260px;
      border:2px solid rgba(101,229,208,.55);
      border-radius:50%;
      box-shadow:0 0 0 24px rgba(255,82,125,.18),0 0 0 48px rgba(115,87,255,.2);
    }
    .nav {
      width:min(1240px, calc(100% - 40px));
      margin:0 auto;
      padding:27px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      position:relative;
      z-index:2;
    }
    .logo {
      text-decoration:none;
      font:800 1.7rem/1 var(--display);
      letter-spacing:-.08em;
    }
    .logo i { color:var(--hot); font-style:normal; }
    .navlinks { display:flex; gap:28px; align-items:center; font-size:.9rem; font-weight:700; }
    .navlinks a { text-decoration:none; color:#fff; }
    .navlinks a:hover { color:var(--aqua); }
    .nav-cta,

/* ===== BUTTONS ===== */
.button {
      border:0;
      background:var(--yellow);
      color:var(--ink);
      font:800 .83rem var(--body);
      letter-spacing:.01em;
      text-decoration:none;
      border-radius:4px;
      padding:15px 21px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      cursor:pointer;
      box-shadow:5px 5px 0 var(--hot);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .nav-cta { padding:11px 16px; box-shadow:3px 3px 0 var(--hot); }
    .button:hover,.nav-cta:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--hot); }
    .hero-content {
      width:min(1160px, calc(100% - 40px));
      margin:auto;
      padding:60px 0 100px;
      position:relative;
      z-index:1;
    }
    .hero h1 {
      font-size:clamp(3.5rem, 9vw, 8.5rem);
      line-height:.86;
      max-width:940px;
      min-height:14.65rem;
      margin:20px 0 27px;
      text-wrap:balance;
    }
    .hero h1 span { color:var(--aqua); }
    .hero-copy { max-width:620px; color:#fff; font-size:1.12rem; margin-bottom:30px; }
    .micro-note { color:#fff; font-size:.82rem; margin:19px 0 0; }
    .mic-orbit {
      position:absolute;
      right:7%;
      top:31%;
      width:220px;
      height:220px;
      border:1px solid rgba(101,229,208,.65);
      border-radius:50%;
      transform:rotate(-17deg);
    }
    .mic-orbit:before,.mic-orbit:after {
      content:"";
      position:absolute;
      background:var(--hot);
      width:15px;height:15px;
      border-radius:50%;
      top:20px; right:28px;
      box-shadow:0 0 30px 8px rgba(255,82,125,.5);
    }
    .mic-orbit:after { top:auto; right:auto; bottom:24px; left:12px; background:var(--yellow); }
    .waveform { position:absolute; right:0; bottom:12px; display:flex; gap:5px; align-items:center; transform:rotate(-8deg); }
    .waveform b { display:block; width:5px; height:var(--h); background:var(--aqua); border-radius:5px; }
    .waveform b:nth-child(3n) { background:var(--hot); }
    .slash {
      height:34px;
      position:relative;
      background:var(--paper);
      clip-path:polygon(0 100%, 100% 0, 100% 100%);
      margin-top:-34px;
      z-index:2;
    }
    section { position:relative; padding:92px 0 105px; overflow:hidden; }
    section:before {
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height:7px;
      background:linear-gradient(90deg,var(--hot),var(--violet),var(--aqua));
      opacity:.9;
    }
    .intro { max-width:800px; margin-bottom:42px; }
    .intro p { max-width:710px; color:var(--muted); font-size:1.05rem; }
    .section-dark { color:#fff; background:linear-gradient(135deg,#120d31 0%,#241449 54%,#10102f 100%); }
    .section-dark .intro p,.section-dark .card p { color:#f4efff; }
    .section-dark .eyebrow { color:var(--aqua); }
    .section-dark h2 { color:#fff; }
    .section-cream { background:linear-gradient(120deg,#fff9ef,#f7e9da 55%,#fbe0dd); }
    .section-aqua { background:linear-gradient(125deg,#e8fff8,#d9f3ee 48%,#f5e7ff); }
    .section-lilac { background:linear-gradient(140deg,#f2edff,#e5dcff 45%,#ffe5e8); }
    

/* ===== CARDS / PANELS ===== */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .cards.four { grid-template-columns:repeat(4,1fr); }
    .card {
      position:relative;
      min-height:190px;
      padding:27px 24px 24px;
      background:rgba(255,255,255,.62);
      border:1px solid rgba(115,87,255,.42);
      border-top:5px solid var(--violet);
      box-shadow:0 12px 30px rgba(30,17,75,.1);
    }
    .section-dark .card { background:rgba(255,255,255,.08); border-color:rgba(101,229,208,.44); border-top-color:var(--aqua); }
    .card:nth-child(2n) { border-top-color:var(--hot); transform:translateY(18px); }
    .card:nth-child(3n) { border-top-color:var(--yellow); }
    .card:after {
      content:"";
      position:absolute;
      width:35px;height:35px;
      right:16px; top:16px;
      border:2px solid currentColor;
      border-radius:50%;
      opacity:.3;
    }
    .card p { color:var(--muted); font-size:.95rem; margin:0; }
    .card-number {
      color:var(--hot);
      font:800 2rem/1 var(--display);
      margin-bottom:26px;
    }
    .pull-band {
      color:#fff;
      background:linear-gradient(110deg,var(--hot),#b943bc 42%,var(--violet));
      padding:48px 0;
      position:relative;
      overflow:hidden;
    }
    .pull-band:after {
      content:"SING  /  MAKE  /  SHARE  /  REPEAT";
      position:absolute;
      right:-20px;
      top:50%;
      transform:translateY(-50%) rotate(-12deg);
      color:rgba(255,255,255,.14);
      font:800 clamp(2rem,6vw,5.5rem)/1 var(--display);
      white-space:nowrap;
    }
    

/* ===== ACCENT BAND ===== */
.band-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; z-index:1; }
    .band-inner h2 { font-size:clamp(2rem,4vw,3.8rem); margin:0; max-width:700px; }
    .band-inner .button { background:#fff; box-shadow:5px 5px 0 var(--yellow); white-space:nowrap; }
    .state-panel {
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:44px;
      align-items:center;
    }
    .list-stack { display:grid; gap:12px; }
    .list-line {
      display:flex;
      gap:16px;
      align-items:flex-start;
      padding:18px;
      border-left:4px solid var(--hot);
      background:rgba(255,255,255,.65);
    }
    .list-line strong { display:block; font-family:var(--display); margin-bottom:4px; }
    .list-line p { margin:0; color:var(--muted); font-size:.92rem; }
    .record-art {
      min-height:300px;
      background:var(--night);
      border:2px solid var(--aqua);
      position:relative;
      padding:30px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      box-shadow:14px 14px 0 var(--hot);
      overflow:hidden;
    }
    .record-art:before {
      content:"";
      position:absolute; inset:25px;
      border:1px solid rgba(101,229,208,.5);
      transform:skewY(-10deg);
    }
    .record-art h3 { color:#fff; font-size:2.5rem; position:relative; }
    .record-art p { color:var(--aqua); position:relative; margin:0; }
    .mini-wave { position:absolute; top:60px; left:32px; right:32px; height:100px; display:flex; align-items:center; gap:7px; }
    .mini-wave i { flex:1; height:var(--h); background:var(--hot); border-radius:99px; }
    .mini-wave i:nth-child(2n) { background:var(--aqua); }
    .video-box {
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:40px;
      align-items:center;
    }
    .video-shape {
      min-height:290px;
      background:linear-gradient(145deg,var(--night),#3a1a65);
      clip-path:polygon(0 8%,92% 0,100% 86%,8% 100%);
      position:relative;
      display:grid;
      place-items:center;
      color:#fff;
    }
    .play {
      width:84px;height:84px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--yellow); color:var(--ink);
      font-size:2rem; padding-left:5px;
      box-shadow:0 0 0 14px rgba(255,209,102,.18), 0 0 0 28px rgba(255,82,125,.15);
    }
    .video-box .copy p { color:var(--muted); }
    .seo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
    .signup {
      background:var(--night);
      color:#fff;
      padding:82px 0 88px;
      position:relative;
      overflow:hidden;
    }
    .signup:before {
      content:"";
      position:absolute;
      width:600px;height:600px;
      border:1px solid rgba(101,229,208,.35);
      border-radius:50%;
      right:-220px;top:-230px;
      box-shadow:0 0 0 30px rgba(255,82,125,.12),0 0 0 60px rgba(115,87,255,.12);
    }
    .signup-inner { position:relative; max-width:800px; }
    .signup h2 { color:#fff; }
    .signup p { color:#fff; max-width:640px; }
    form { display:flex; max-width:650px; gap:10px; margin-top:28px; }
    input {
      min-width:0;
      flex:1;
      border:2px solid var(--aqua);
      background:#fff;
      color:var(--ink);
      padding:16px 18px;
      border-radius:3px;
      font:500 1rem var(--body);
    }
    form button { border:0; }
    .thanks { color:var(--aqua); font-weight:700; margin-top:15px; min-height:24px; }
    footer {
      background:#070615;
      color:#fff;
      padding:42px 0 25px;
      border-top:6px solid var(--hot);
    }
    

/* ===== FOOTER ===== */
.footer-top { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; }
    .footer-tag { max-width:590px; color:#fff; margin:0; line-height:1.55; }
    .footer-nav { display:flex; flex-wrap:wrap; gap:18px; font-weight:700; font-size:.9rem; }
    .footer-nav a { color:#fff; text-decoration:none; }
    .footer-nav a:hover { color:var(--aqua); }
    .credits { color:#d9d4e9; font-size:.76rem; margin:38px 0 0; }
    .credits a { color:var(--aqua); }
    .reveal { opacity:.55; transform:translateY(14px); transition:opacity .4s ease,transform .4s ease; }
    .reveal.visible { opacity:1; transform:none; }
    

/* ===== RESPONSIVE ===== */
@media (max-width:800px) {
      .navlinks a:not(.nav-cta) { display:none; }
      .mic-orbit { opacity:.4; right:-70px; top:42%; }
      .cards,.cards.four { grid-template-columns:repeat(2,1fr); }
      .state-panel,.video-box { grid-template-columns:1fr; }
      .band-inner { align-items:flex-start; flex-direction:column; }
      .footer-top { flex-direction:column; }
    }
    @media (max-width:520px) {
      .shell,.hero-content,.nav { width:min(100% - 28px,1160px); }
      .hero-content { padding-top:45px; }
      .hero h1 { font-size:clamp(3.1rem,16vw,5rem); min-height:13.5rem; }
      .hero-copy { font-size:1rem; }
      section { padding:76px 0 84px; }
      .cards,.cards.four,.seo-grid { grid-template-columns:1fr; }
      .card:nth-child(2n) { transform:none; }
      .form { flex-direction:column; }
      form { flex-direction:column; }
      input,.button { width:100%; }
      .nav-cta { padding:10px 12px; }
      .logo { font-size:1.45rem; }
    }