@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #18142c;
  --ink-soft: #4c4861;
  --paper: #fffaf4;
  --white: #ffffff;
  --plum: #5b2a86;
  --violet: #8f4cff;
  --coral: #ff6b6b;
  --orange: #ff9f1c;
  --acid: #d9ed92;
  --mint: #99f2c8;
  --cyan: #48cae4;
  --line: rgba(24, 20, 44, .13);
  --shadow: 0 22px 60px rgba(50, 27, 91, .14);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(217, 237, 146, .35), transparent 26rem),
    radial-gradient(circle at 92% 25%, rgba(143, 76, 255, .14), transparent 30rem),
    var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
button, input { font: inherit; }
.skip-link {
  position: fixed; left: 1rem; top: -10rem; z-index: 999;
  background: var(--ink); color: white; padding: .8rem 1rem; border-radius: 10px;
}
.skip-link:focus { top: 1rem; }
.site-header {
  width: min(1180px, calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: .8rem .9rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 18px;
  background: rgba(255,250,244,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(41, 22, 66, .08);
  position: sticky; top: .7rem; z-index: 50;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 800; line-height: 1.05; }
.brand small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-top: .16rem; }
.brand-mark {
  display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(135deg, var(--coral), var(--orange));
  color: white; font-family: "DM Mono"; font-size: .8rem; transform: rotate(-4deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.site-header nav { display: flex; gap: 1.4rem; }
.site-header nav a { text-decoration: none; font-size: .86rem; font-weight: 700; color: var(--ink-soft); }
.site-header nav a:hover { color: var(--violet); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.25rem; border: 0; border-radius: 13px; cursor: pointer;
  color: white; background: linear-gradient(135deg, var(--plum), var(--violet));
  box-shadow: 0 10px 25px rgba(91,42,134,.25);
  font-weight: 800; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(91,42,134,.33); }
.button-small { padding: .65rem .9rem; font-size: .82rem; }
.button-wide { width: 100%; }
.button-ghost { color: var(--ink); background: rgba(255,255,255,.62); border: 1px solid var(--line); box-shadow: none; }
.button-ghost-light { color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.hero {
  width: min(1180px, calc(100% - 2rem));
  margin: 3rem auto 4rem;
  min-height: 620px;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 4rem; align-items: center;
}
.eyebrow { margin: 0 0 .7rem; color: var(--plum); text-transform: uppercase; letter-spacing: .15em; font: 500 .72rem "DM Mono"; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(3.4rem, 7.2vw, 6.7rem); line-height: .92; letter-spacing: -.075em; }
h1 em { color: var(--violet); font-style: normal; position: relative; }
h1 em::after { content:""; position:absolute; left:0; right:0; bottom:.02em; height:.12em; background: var(--acid); z-index:-1; transform: rotate(-1deg); }
.hero-lede { max-width: 620px; margin: 1.6rem 0; font-size: 1.08rem; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; color: var(--ink-soft); font-size: .77rem; }
.hero-proof span { display: flex; flex-direction: column; padding-right: 1.2rem; border-right: 1px solid var(--line); }
.hero-proof span:last-child { border: 0; }
.hero-proof strong { color: var(--ink); font-size: 1.25rem; }
.ruination-machine {
  min-height: 530px; position: relative; overflow: hidden;
  border-radius: 42% 58% 47% 53% / 55% 38% 62% 45%;
  background: linear-gradient(145deg, #22183f, #5b2a86 55%, #8f4cff);
  box-shadow: 28px 32px 0 rgba(72,202,228,.32), var(--shadow);
}
.machine-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--coral); filter: blur(80px); opacity: .4; right: -60px; top: -40px; }
.paper {
  position: absolute; width: 178px; height: 235px; padding: 22px;
  background: white; box-shadow: 0 15px 28px rgba(0,0,0,.24); font-family: "DM Mono"; font-size: .7rem;
}
.paper span { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 24px; }
.paper i { display: block; height: 5px; margin: 9px 0; background: #cbc7d5; border-radius: 99px; }
.paper i:nth-of-type(2) { width: 75%; }
.paper i:nth-of-type(3) { width: 90%; }
.paper b { position: absolute; bottom: 20px; left: 22px; color: #4f9b64; }
.paper-good { left: 27px; top: 42px; transform: rotate(-10deg); animation: floatPaper 4s ease-in-out infinite; }
.paper-bad { right: 25px; bottom: 32px; transform: rotate(12deg); background: #fff6dd; clip-path: polygon(0 0,100% 2%,96% 36%,100% 70%,93% 100%,3% 96%,0 62%,5% 30%); }
.paper-bad i { transform: skewX(-18deg); background: #8f4cff; }
.paper-bad i:nth-of-type(2) { margin-left: 27px; width: 44%; }
.paper-bad b { color: var(--coral); }
.crusher {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-3deg);
  width: 220px; height: 210px; border: 8px solid #18142c; border-radius: 24px;
  background: linear-gradient(145deg, var(--orange), var(--coral));
  box-shadow: inset -15px -15px 0 rgba(94,25,61,.14), 15px 20px 0 rgba(24,20,44,.5);
  z-index: 4;
}
.crusher-label { display: block; margin: 20px auto 13px; width: max-content; padding: 6px 10px; background: var(--ink); color: white; font: 500 .75rem "DM Mono"; transform: rotate(2deg); }
.crusher-teeth { height: 45px; margin: 18px -8px 0; background: repeating-linear-gradient(120deg, #18142c 0 16px, transparent 16px 30px); }
.warning { margin: 15px auto; width: 80%; text-align: center; font: 500 .67rem/1.4 "DM Mono"; }
.sparks { position:absolute; left:48%; top:47%; z-index:8; color:var(--acid); font-size:2rem; transform:rotate(-15deg); animation:spark 1.2s infinite; }
@keyframes floatPaper { 50% { transform: rotate(-7deg) translateY(-12px); } }
@keyframes spark { 50% { opacity:.25; transform:rotate(15deg) scale(1.3); } }

.ticker { overflow: hidden; border-block: 1px solid var(--ink); background: var(--acid); transform: rotate(-.5deg); }
.ticker div { width: max-content; padding: .75rem 0; display: flex; gap: 3rem; animation: ticker 28s linear infinite; font: 500 .75rem "DM Mono"; }
.ticker span::after { content:"✦"; margin-left:3rem; }
.ticker span:first-child { font-weight:700; color:var(--plum); }
@keyframes ticker { to { transform: translateX(-45%); } }
.section { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 7rem 0; }
.section-heading { max-width: 650px; margin-bottom: 2.4rem; }
.section-heading h2, .cta-section h2, .testimonial-side h2 { margin:0; font-size:clamp(2.3rem,5vw,4.6rem); letter-spacing:-.055em; line-height:1; }
.section-heading > p:last-child { color:var(--ink-soft); }
.split-heading { max-width:none; display:flex; justify-content:space-between; align-items:end; gap:3rem; }
.split-heading > p { max-width:400px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.step-card, .price-card, .detail-grid article {
  position:relative; padding:2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.66); box-shadow:0 12px 35px rgba(44,31,70,.06);
}
.step-card:nth-child(2) { transform:translateY(24px); background:linear-gradient(145deg,#fff,#f4ecff); }
.step-card:nth-child(3) { background:linear-gradient(145deg,#fff,#effdf6); }
.step-number { position:absolute; right:1.3rem; top:1rem; font:500 .8rem "DM Mono"; color:var(--ink-soft); }
.icon { width:60px; height:60px; display:grid; place-items:center; margin-bottom:2rem; border-radius:18px; color:white; font-size:1.6rem; background:linear-gradient(135deg,var(--coral),var(--orange)); box-shadow:6px 6px 0 var(--ink); }
.step-card:nth-child(2) .icon { background:linear-gradient(135deg,var(--plum),var(--violet)); }
.step-card:nth-child(3) .icon { background:linear-gradient(135deg,#2a9d8f,var(--cyan)); }
.step-card h3, .price-card h3, .detail-grid h3 { margin:.2rem 0 .7rem; font-size:1.35rem; letter-spacing:-.03em; }
.step-card p, .detail-grid p { color:var(--ink-soft); margin-bottom:0; }

.packages-section { width:min(1400px,calc(100% - 2rem)); }
.pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; align-items:stretch; }
.price-card { padding:1.4rem; display:flex; flex-direction:column; min-width:0; }
.price-card.featured { color:white; background:linear-gradient(160deg,var(--ink),var(--plum)); transform:translateY(-14px); border-color:transparent; box-shadow:0 28px 50px rgba(41,20,74,.26); }
.price-card.enterprise { background:linear-gradient(145deg,#f2ffe5,#fff); }
.popular-tag { position:absolute; top:-13px; right:14px; padding:.3rem .55rem; border-radius:99px; background:var(--acid); color:var(--ink); font:500 .62rem "DM Mono"; text-transform:uppercase; }
.package-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--ink); color:white; font:500 .9rem "DM Mono"; box-shadow:4px 4px 0 var(--coral); }
.featured .package-icon { background:var(--acid); color:var(--ink); }
.package-label { margin:1.2rem 0 0; font:500 .63rem "DM Mono"; text-transform:uppercase; letter-spacing:.12em; color:var(--violet); }
.featured .package-label { color:var(--mint); }
.price { margin:.8rem 0; font-size:2.1rem; line-height:1; font-weight:800; letter-spacing:-.05em; }
.price span { font-size:.7rem; font-weight:500; letter-spacing:0; color:var(--ink-soft); }
.featured .price span, .featured .package-blurb, .featured li { color:#d9d0e9; }
.package-blurb { min-height:86px; color:var(--ink-soft); font-size:.86rem; }
.price-card ul { list-style:none; padding:0; margin:1rem 0 1.5rem; font-size:.79rem; flex:1; }
.price-card li { padding:.48rem 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.price-card li::before { content:"↳"; margin-right:.45rem; color:var(--coral); }
.featured li { border-color:rgba(255,255,255,.13); }
.price-card .button { font-size:.73rem; padding:.78rem .5rem; }

.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.detail-grid article { overflow:hidden; }
.detail-grid article span { position:absolute; right:-8px; top:-28px; font-size:6rem; font-weight:800; color:rgba(143,76,255,.08); }
.detail-grid article:nth-child(2n) { background:linear-gradient(145deg,#fff8e9,#fff); }
.detail-grid article:nth-child(3n) { background:linear-gradient(145deg,#ecfff7,#fff); }

.dashboard-section { width:min(1350px,calc(100% - 2rem)); }
.dashboard {
  display:grid; grid-template-columns:190px 1fr; overflow:hidden; min-height:650px;
  border:8px solid var(--ink); border-radius:30px; background:#f6f5fb; box-shadow:30px 30px 0 var(--cyan);
}
.dash-sidebar { padding:1.5rem 1rem; background:var(--ink); display:flex; flex-direction:column; gap:.35rem; }
.dash-logo { margin-bottom:2rem; color:var(--acid); font:700 1.1rem "DM Mono"; }
.dash-sidebar a { padding:.7rem .8rem; border-radius:10px; color:#aaa3bd; text-decoration:none; font-size:.76rem; }
.dash-sidebar a.active, .dash-sidebar a:hover { background:rgba(255,255,255,.1); color:white; }
.dash-main { padding:2rem; }
.dash-top { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.dash-kicker { margin:0; font:500 .65rem "DM Mono"; color:var(--violet); text-transform:uppercase; }
.dash-top h3 { margin:.2rem 0; font-size:1.5rem; }
.status-pill { padding:.5rem .75rem; border-radius:99px; background:#e3fbe9; color:#22613a; font-size:.68rem; font-weight:700; }
.status-pill i { display:inline-block; width:7px; height:7px; background:#45a866; border-radius:50%; margin-right:.3rem; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin:2rem 0; }
.metrics article, .chart-card, .activity-card { padding:1.2rem; border:1px solid #e1dfeb; border-radius:17px; background:white; }
.metrics span, .metrics small { display:block; color:#787286; font-size:.67rem; }
.metrics strong { display:block; margin:.4rem 0; font-size:1.7rem; }
.metrics small { color:#bc4c64; }
.dash-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:.8rem; }
.card-title { display:flex; justify-content:space-between; align-items:center; }
.card-title h4 { margin:0; }
.card-title span { font-size:.65rem; color:#787286; }
.chart { height:260px; position:relative; margin-top:1rem; border-left:1px solid #ddd9e8; border-bottom:1px solid #ddd9e8; background:linear-gradient(to bottom,transparent 24%,#eeeaf4 25%,transparent 26%,transparent 49%,#eeeaf4 50%,transparent 51%,transparent 74%,#eeeaf4 75%,transparent 76%); overflow:hidden; }
.chart-line { position:absolute; inset:10px; background:linear-gradient(160deg,transparent 0 25%,var(--violet) 26% 28%,transparent 29% 43%,var(--violet) 44% 47%,transparent 48% 55%,var(--coral) 56% 60%,transparent 61% 66%,var(--coral) 67% 71%,transparent 72%); filter:drop-shadow(0 6px 3px rgba(143,76,255,.15)); }
.chart-note { position:absolute; left:12px; bottom:12px; font:500 .58rem "DM Mono"; }
.chart-note.last { left:auto; right:12px; color:var(--coral); }
.activity-card ul { list-style:none; padding:0; margin:1rem 0 0; }
.activity-card li { display:grid; grid-template-columns:10px 1fr auto; gap:.7rem; padding:1rem 0; border-bottom:1px solid #eeeaf4; }
.activity-card i { width:8px; height:8px; border-radius:50%; margin-top:.35rem; background:var(--coral); }
.activity-card i.warn { background:var(--orange); }
.activity-card i.good { background:#4fb676; }
.activity-card strong, .activity-card span { display:block; font-size:.68rem; }
.activity-card span, .activity-card time { color:#817b8e; font-size:.61rem; }

.testimonial-section { display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:center; }
blockquote { margin:0; padding:3rem; border-radius:var(--radius); background:linear-gradient(145deg,var(--acid),#fff6a7); box-shadow:18px 18px 0 var(--ink); position:relative; transform:rotate(-1deg); }
.quote-mark { position:absolute; right:1.5rem; top:-2rem; font-size:8rem; color:var(--coral); line-height:1; }
blockquote > p { margin:0; font-size:1.35rem; font-weight:700; letter-spacing:-.03em; line-height:1.45; }
blockquote footer { display:flex; align-items:center; gap:.8rem; margin-top:1.6rem; }
.avatar { width:45px; height:45px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font:500 .75rem "DM Mono"; }
blockquote footer strong, blockquote footer span { display:block; font-size:.75rem; }
blockquote footer span { color:var(--ink-soft); }
.testimonial-side p:not(.eyebrow) { color:var(--ink-soft); }
.text-link { font-weight:800; color:var(--plum); text-decoration:none; }

.cta-section {
  width:min(1180px,calc(100% - 2rem)); margin:2rem auto 7rem; padding:4rem;
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  color:white; border-radius:34px; background:
  radial-gradient(circle at 80% 20%,rgba(255,107,107,.65),transparent 18rem),
  linear-gradient(135deg,var(--ink),var(--plum));
  box-shadow:20px 20px 0 var(--orange);
}
.cta-section .eyebrow { color:var(--mint); }
.cta-actions { display:flex; gap:.7rem; flex-wrap:wrap; justify-content:flex-end; }

.site-footer { padding:4rem max(1rem,calc((100% - 1180px)/2)); background:var(--ink); color:white; }
.footer-main { display:flex; justify-content:space-between; gap:4rem; }
.footer-brand p { color:#aaa3bd; font-size:.8rem; margin-top:1.5rem; }
.footer-brand strong { color:white; }
.footer-links { display:flex; gap:5rem; }
.footer-links h3 { font-size:.75rem; margin:0 0 .8rem; }
.footer-links a, .footer-links button { display:block; margin:.45rem 0; color:#aaa3bd; text-decoration:none; font-size:.75rem; }
.link-button { border:0; padding:0; background:none; color:inherit; cursor:pointer; text-decoration:underline; }
.badges { display:flex; flex-wrap:wrap; gap:.55rem; margin:3rem 0; padding:1.5rem 0; border-block:1px solid rgba(255,255,255,.12); }
.badges span { padding:.55rem .65rem; border:1px solid rgba(255,255,255,.25); border-radius:8px; color:#aaa3bd; font:500 .6rem "DM Mono"; }
.badges b { display:block; color:white; font-size:.78rem; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; color:#777086; font-size:.66rem; }
.footer-bottom a { color:#aaa3bd; }

.cookie-banner {
  position:fixed; z-index:100; left:50%; bottom:1rem; transform:translateX(-50%);
  width:min(1060px,calc(100% - 2rem)); padding:1.2rem;
  display:grid; grid-template-columns:90px 1fr auto; gap:1.2rem; align-items:center;
  border:3px solid var(--ink); border-radius:22px; background:var(--paper); box-shadow:0 25px 80px rgba(24,20,44,.35);
}
.cookie-banner[hidden] { display:none; }
.cookie-illustration { width:80px; height:80px; display:grid; place-items:center; position:relative; border-radius:50%; background:var(--acid); font-size:2.4rem; }
.cookie-illustration span { position:absolute; bottom:2px; right:-3px; padding:1px 4px; background:var(--coral); color:white; font:500 .55rem "DM Mono"; transform:rotate(-9deg); }
.cookie-copy h2 { margin:0; font-size:1.3rem; }
.cookie-copy > p:not(.eyebrow) { margin:.25rem 0 .7rem; color:var(--ink-soft); font-size:.72rem; }
.cookie-options { display:flex; gap:.7rem; }
.cookie-options label { display:flex; gap:.8rem; align-items:center; padding:.5rem .7rem; border:1px solid var(--line); border-radius:10px; }
.cookie-options span, .cookie-options strong, .cookie-options small { display:block; }
.cookie-options strong { font-size:.67rem; }
.cookie-options small { color:var(--ink-soft); font-size:.57rem; }
.cookie-actions { display:flex; flex-direction:column; gap:.45rem; min-width:205px; }
.cookie-actions .button { padding:.65rem .75rem; font-size:.68rem; }
.cookie-actions .link-button { font-size:.58rem; }

.privacy-shell { width:min(850px,calc(100% - 2rem)); margin:0 auto; padding:6rem 0; }
.privacy-hero { padding-bottom:3rem; border-bottom:1px solid var(--line); }
.privacy-hero h1 { font-size:clamp(3.5rem,8vw,6.5rem); }
.privacy-hero > p:last-child { max-width:700px; color:var(--ink-soft); font-size:1.1rem; }
.privacy-content { padding-top:3rem; }
.privacy-content h2 { margin:2.6rem 0 .5rem; font-size:1.45rem; letter-spacing:-.03em; }
.privacy-content p, .privacy-content li { color:var(--ink-soft); }
.privacy-content code { padding:.15rem .4rem; border-radius:5px; background:#eee8f5; color:var(--plum); }
.policy-note { padding:1.2rem; border-left:5px solid var(--orange); border-radius:10px; background:#fff2d9; color:var(--ink-soft); }
.policy-note-bottom { margin-top:3rem; background:#effcf5; border-color:#3fa67d; }
.privacy-content address { font-style:normal; padding:1rem; background:white; border:1px solid var(--line); border-radius:12px; }

@media (max-width:1100px) {
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .price-card.featured { transform:none; }
  .price-card.enterprise { grid-column:span 2; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .cookie-banner { grid-template-columns:70px 1fr; }
  .cookie-actions { grid-column:1/-1; flex-direction:row; }
}
@media (max-width:820px) {
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; gap:2rem; }
  .ruination-machine { min-height:480px; }
  .steps, .detail-grid { grid-template-columns:1fr; }
  .step-card:nth-child(2) { transform:none; }
  .split-heading, .testimonial-section, .cta-section, .footer-main { display:block; }
  .split-heading > p { max-width:none; }
  .dashboard { grid-template-columns:1fr; }
  .dash-sidebar { display:none; }
  .dash-grid { grid-template-columns:1fr; }
  .testimonial-side { margin-top:4rem; }
  .cta-actions { margin-top:2rem; justify-content:flex-start; }
  .footer-links { margin-top:3rem; }
}
@media (max-width:580px) {
  .site-header .button { display:none; }
  h1 { font-size:3.6rem; }
  .hero { margin-top:2rem; }
  .ruination-machine { min-height:430px; }
  .paper { width:135px; height:185px; padding:15px; }
  .paper span { font-size:.72rem; margin-bottom:15px; }
  .crusher { width:180px; height:180px; }
  .pricing-grid { grid-template-columns:1fr; }
  .price-card.enterprise { grid-column:auto; }
  .metrics { grid-template-columns:1fr; }
  .dash-main { padding:1rem; }
  .dash-top { display:block; }
  .status-pill { display:inline-block; margin-top:1rem; }
  .cta-section { padding:2rem; }
  .footer-links { gap:2rem; }
  .footer-bottom { display:block; }
  .cookie-banner { grid-template-columns:1fr; max-height:calc(100vh - 2rem); overflow:auto; }
  .cookie-illustration { display:none; }
  .cookie-options, .cookie-actions { flex-direction:column; }
}