:root{
    --bg:#f7f5ff;
    --bg-alt:#fff;
    --ink:#2a2340;
    --muted:#6d6584;
    --primary:#6c4bd8;
    --primary-2:#8e5cf6;
    --warn:#f59f00;
    --ring:rgba(108,75,216,.35);
    --radius:14px;
    --radius-sm:10px;
    --shadow:0 4px 12px rgba(22,8,66,.08), 0 10px 30px rgba(22,8,66,.08);
    --grad:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
    
    /* Additional colors from mainpage.html */
    --panel:#ffffff;
    --violet:#8858ff;
    --violet-start:#a06cff;
    --accent-red:#e93d3d;
    --accent-red-hover:#c82333;
    --mainpage-shadow:0 10px 30px rgba(136,88,255,0.09), 0 2px 8px rgba(30,30,60,.06);
  }
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--ink);
    background:var(--bg);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;  text-rendering:optimizeLegibility;
  }
  
  /* Header */
  .of-header{
    background: var(--grad);
    color:#fff;
    position: sticky; top:0; z-index:1000;
    box-shadow: 0 2px 10px rgba(16,0,60,.12);
  }
  .of-container{ width:min(1120px, 92%); margin:0 auto; }
  .of-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
  .of-brand{ display:flex; gap:10px; align-items:center; font-weight:800; color:#fff; text-decoration:none; letter-spacing:.2px; }
  .of-brand img{ height:32px; width:auto; border-radius:0px; box-shadow:0 0px 0px rgba(0,0,0,.25); display:block; }
  .of-logo-circle{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,.18); }
  .of-logo-text{ font-weight:800; font-size:18px; }
  
  .of-links a{ color:#fff; text-decoration:none; opacity:.95; margin:0 10px; font-weight:600; }
  .of-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
  .of-cta{ display:flex; gap:10px; align-items:center; }

  @media (max-width: 760px){
    .of-nav{ flex-direction:column; align-items:stretch; gap:12px; padding:10px 0 14px; }
    .of-brand{ font-size:17px; }
    .of-cta{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .of-cta .btn{ width:100%; padding:12px 0; }
  }
  @media (max-width: 480px){
    .of-cta{ grid-template-columns:1fr; }
    .of-cta .btn{ padding:12px; }
  }
  
  /* Buttons */
  .btn{
    --pad-x:18px; --pad-y:10px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:var(--pad-y) var(--pad-x);
    border-radius:12px; border:0; cursor:pointer; text-decoration:none;
    font-weight:700; letter-spacing:.2px; transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background:#fff; color:var(--primary); box-shadow:var(--shadow); }
  .btn-primary:hover{ filter:brightness(1.02); }
  .btn-secondary{ background:var(--bg-alt); color:var(--ink); border:1px solid #e7e2ff; }
  .btn-ghost{ background:rgba(255,255,255,.22); color:#fff; }
  .btn-ghost:hover{ background:rgba(255,255,255,.3); }
  .btn-link{ color:#fff; background:transparent; text-decoration:underline; text-underline-offset:3px; padding:0 4px; }
  .btn-warn{ background: var(--warn); color:#1a132e; }
  
  /* Hero */
  .hero{ background: radial-gradient(90% 70% at 80% -10%, #e8e2ff 0%, transparent 60%), #f6f2ff; padding:72px 0 44px; }
  .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:min(6vw,64px); align-items:center; }
  .hero h1{ font-size: clamp(32px, 3.4vw, 56px); line-height:1.05; margin:0 0 14px; letter-spacing:-.02em; }
  .subhead{ font-size: clamp(16px, 1.6vw, 20px); color:var(--muted); margin:0 0 18px; }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 10px; }
  .hero-bullets{ margin:18px 0 0; color:var(--muted); padding-left:18px; }
  .hero-visual{ min-height:240px; position:relative; }
  .hero-art{ width:100%; border-radius:16px; box-shadow:0 18px 40px rgba(24,39,75,.25); transition:transform .25s ease, box-shadow .25s ease; }
  .hero-art:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(24,39,75,.28); }
  .hero-deck{ position:relative; height:260px; }
  .hero-deck .card.demo{
    position:absolute; width:160px; height:220px; border-radius:18px;
    background: linear-gradient(180deg, #2f214e, #1a132f);
    box-shadow: var(--shadow); color:#d7caff; font-size:38px; display:grid; place-items:center;
    outline: 2px solid rgba(255,255,255,.06);
  }
  .hero-deck .card.demo:nth-child(1){ transform: rotate(-10deg) translate(10px, 40px); }
  .hero-deck .card.demo:nth-child(2){ transform: rotate(6deg) translate(120px, 0px); }
  .hero-deck .card.demo:nth-child(3){ transform: rotate(-2deg) translate(90px, 90px); }
  .hero-deck .card.demo:nth-child(4){ transform: rotate(12deg) translate(200px, 40px); }
  
  /* Sections */
  .section{ padding:64px 0; }
  .section.alt{ background:#fff; }
  .section-title{ font-size: clamp(24px, 2.2vw, 36px); margin:0 0 18px; letter-spacing:-.01em; }
  .section-sub{ color:var(--muted); margin:0 0 22px; }
  
  /* Tiles */
  .tile-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
  .tile{
    background:var(--bg-alt); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 18px 16px;
    border:1px solid #ece6ff; min-height:140px;
  }
  .tile h3{ margin:8px 0 8px; font-size:18px; }
  .tile p{ margin:0; color:var(--muted); }

  @media (max-width: 1020px){
    .tile-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px){
    .hero-grid{ grid-template-columns: 1fr; }
    .tile-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 640px){
    .hero{ padding:54px 0 32px; text-align:center; }
    .hero-grid{ gap:32px; }
    .hero-copy{ display:grid; gap:14px; }
    .hero-bullets{ margin:0 auto; padding-left:20px; text-align:left; max-width:20rem; }
    .hero-visual{ order:-1; }
    .hero-art{ max-width:360px; margin:0 auto; }
  }
  @media (max-width: 480px){
    .hero h1{ font-size: clamp(28px, 8vw, 36px); }
    .subhead{ font-size:16px; }
  }

  /* Steps */
  .steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
  .step{ background:var(--bg-alt); border:1px solid #ece6ff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
  .step h3{ margin:6px 0 6px; }
  .step-num{ width:30px; height:30px; display:inline-grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; }

  @media (max-width: 980px){
    .steps{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    .steps{ grid-template-columns:1fr; }
    .step{ text-align:left; }
  }
  
  /* Use cases */
  .use-cases{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
  .use{ background:#fff; border:1px solid #ece6ff; border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
  .use h3{ margin:6px 0 8px; }
  @media (max-width: 1020px){ .use-cases{ grid-template-columns: repeat(2, 1fr);} }
  @media (max-width: 640px){ .use-cases{ grid-template-columns: 1fr;} }
  
  /* Demo */
  .demo-wrap{ background:#fff; border-radius:var(--radius); border:1px solid #ece6ff; box-shadow:var(--shadow); padding:18px; }
  .demo-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .demo-boards{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:center; }
  .board{
    min-height:220px; background: repeating-linear-gradient(-45deg, #f7f3ff, #f7f3ff 10px, #f2edff 10px, #f2edff 20px);
    border-radius:var(--radius); border:1px dashed #dcd1ff; position:relative; overflow:hidden;
  }
  .board::before{ content:attr(aria-label); position:absolute; top:10px; left:12px; font-size:12px; color:#8c84a6; letter-spacing:.4px; }
  
  .card{
    width:120px; height:168px; border-radius:14px; position:absolute; transform-origin: bottom center;
    background:linear-gradient(180deg, #3a285c, #1b1331); color:#e5dcff; display:grid; place-items:center; font-weight:800;
    border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); user-select:none;
  }
  .card[draggable="true"]{ cursor:grab; }
  .card:focus{ outline: 3px solid var(--ring); }
  
  .discard .card{ filter:saturate(.75) brightness(.9); }
  
  .reveal-area{ margin-top:14px; }
  .reveal-title{ margin:0 0 8px; }
  .reveal-grid{
    display:grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap:12px;
  }
  .reveal-grid .card{ position:relative; width:100%; height:168px; transform:none; }
  .draw-limit{ margin-top:6px; color:#a03; font-weight:700; }
  
  @media (max-width: 900px){
    .demo-boards{ grid-template-columns: 1fr; }
    .reveal-grid{ grid-template-columns: repeat(3, minmax(120px,1fr)); }
  }

  @media (max-width: 640px){
    .section{ padding:48px 0; }
    .demo-controls{ flex-direction:column; align-items:stretch; }
    .pricing{ grid-template-columns:1fr; }
    .quotes{ grid-template-columns:1fr; }
    .footer-flex{ flex-direction:column; align-items:flex-start; gap:10px; }
  }
  
  /* Embed showcase */
  .embed-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  .embed-card{ background:#fff; border:1px solid #ece6ff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
  .embed-title{ margin: 0 0 10px; }
  .embed-placeholder{ background:#faf8ff; border:1px dashed #dcd1ff; border-radius:12px; min-height:180px; display:grid; place-items:center; color:#8a81aa; }
  .code-snippet{
    margin-top:16px; background:#0f0a1f; color:#e7e0ff; padding:14px; border-radius:12px; overflow:auto; box-shadow:0 6px 18px rgba(10,0,28,.3);
  }
  
  @media (max-width: 900px){
    .embed-grid{ grid-template-columns: 1fr; }
  }
  
  /* Why + quotes */
  .why-list{ color:var(--muted); display:grid; gap:10px; }
  .quotes{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
  .quote{ background:#fff; border:1px solid #ece6ff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
  .quote blockquote{ margin:0 0 8px; font-weight:700; }
  
  /* Pricing */
  .pricing{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
  .plan{ background:#fff; border:1px solid #ece6ff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; text-align:center; }
  .plan-featured{ outline:3px solid #e7e2ff; box-shadow: 0 12px 40px rgba(91,49,212,.12); }
  .plan h3{ margin:6px 0 10px; }
  
  /* FAQ */
  .faq details{ background:#fff; border:1px solid #ece6ff; border-radius:var(--radius-sm); padding:12px 14px; box-shadow:var(--shadow); }
  .faq details+details{ margin-top:10px; }
  .faq summary{ cursor:pointer; font-weight:700; }
  .faq p{ margin:10px 0 0; color:var(--muted); }
  
  /* Footer */
  .of-footer{ padding:22px 0 32px; background:#fff; border-top:1px solid #eee7ff; }
  .footer-flex{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .footer-flex p{ color:#8a81aa; }
  .footer-flex .of-links a{ color:var(--ink); margin-left:12px; }