:root{
    --mx:1250px;
    --text:#1B1B1B;
    --border:#E6E7EB;
    --tabs-wrap:#F2F2F3;
    --tab-active-bg:#FFFFFF;
    --tab-active-stroke:rgba(39,39,42,.15);
    --tab-text:#575758;
    --btn:#1B1B1B;
    --btn-text:#fff;
    --radius:20px;
    --ease:cubic-bezier(.25,.8,.25,1);

    /* —— SPACING DESKTOP —— */
    --space-kicker-title:20px;
    --space-title-button:35px;
    --space-button-tabs:40px;
  }

  /* —— SPACING MOBILE —— */
  @media (max-width:640px){
    :root{
      --space-kicker-title:20px;
      --space-title-button:30px;
      --space-button-tabs:35px;
    }

    .headline{
      font-size:clamp(30px,8vw,34px);
    }

    .subheadline{
      font-size:16px;
      line-height:1.4;
    }

    .tabs-wrap{
      margin-bottom:44px;
    }

    .gap-3{
      display:none;
    }
  }

  *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

  .wrap{max-width:var(--mx);margin:0 auto;padding:80px 24px;text-align:center}
  .stack{display:flex;flex-direction:column;align-items:center}

  .gap-1,.gap-2{ margin-top:0 !important; }

  .kicker{
    margin:0 0 var(--space-kicker-title);
    font:600 13px/1.2 Inter;
    color:#0f1115;
    opacity:.8;
  }

  .headline{
    margin:0 0 var(--space-title-button);
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--text);
    font-size:clamp(34px,5vw,50px);
    line-height:1.12;
    max-width:16ch;
  }

  .subheadline{
    margin:-18px 0 var(--space-title-button);
    max-width:34ch;
    font:400 18px/1.45 Inter;
    color:#5f6368;
  }

  .example-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:9999px;
    background:#fff;
    border:1px solid #E6E7EB;
    box-shadow:0 1px 0 rgba(15,17,21,.04), inset 0 1px 0 rgba(255,255,255,.9);
    font:500 16px/1 Inter;
    color:#1B1B1B;
    text-decoration:none;
    margin:0 0 var(--space-button-tabs);
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  }
  .example-btn:hover{ background:#FAFAFA; border-color:#DFE3EA; transform:translateY(-1px); }
  .example-btn:active{ transform:translateY(0); background:#F5F5F5; }
  .example-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

  .tabs-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    background:var(--tabs-wrap);
    border:1px solid var(--border);
    border-radius:9999px;
    padding:6px;
    max-width:100%;
    overflow:hidden;
  }
  .tabs-scroll{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs-scroll::-webkit-scrollbar{ display:none }
  .tabs-wrap::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:56px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(242,242,243,0) 0%, #ffffff 85%);
  }
  .tabs-wrap.end::after{ opacity:0; transition:opacity .2s }

  .tab{
    appearance:none;
    border:1px solid transparent;
    cursor:pointer;
    padding:10px 16px;
    border-radius:9999px;
    background:transparent;
    color:var(--tab-text);
    font:400 14px/1 Inter;
    white-space:nowrap;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .tab[aria-selected="true"]{
    background:var(--tab-active-bg);
    border-color:var(--tab-active-stroke);
    color:var(--text);
  }
  .tab:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

  .gap-3{ margin-top:clamp(20px,3vw,36px); }

  .panel{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:42px;
    box-shadow:0 1px 2px rgba(15,17,21,.06);
    min-height:clamp(420px, 56vh, 560px);
  }
  @media (max-width:900px){
    .panel{
      padding:28px;
      min-height:auto;
    }
  }

  @media (min-width:901px){
    .wrap{ padding:64px 24px; }
    .panel{ padding:4px 34px; }
  }

  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    align-items:stretch;
  }
  @media (max-width:1024px){
    .grid{ grid-template-columns:1fr; gap:24px }
  }

  .colL{ display:grid; align-content:center; }
  .colR{ display:grid; align-content:center; justify-items:center; }
  @media (max-width:1024px){
    .colL{ align-content:start; }
  }

  .colL h3{ margin:0 0 10px; font:600 26px/1.25 Inter; color:var(--text) }
  .colL p{ margin:0 0 18px; font:400 16px/1.45 Inter; color:var(--text) }

  .btns{ display:flex; gap:12px; flex-wrap:wrap }
  .btn{
    appearance:none;
    border:0;
    border-radius:9999px;
    padding:12px 18px;
    font:600 14px/1 Inter;
    cursor:pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .btn.primary{ background:var(--btn); color:var(--btn-text); }
  .btn.primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
  .btn.primary:active{ transform:translateY(0); box-shadow:0 2px 10px rgba(0,0,0,.12); }

  .btn.link{ background:#fff; color:var(--text); border:1px solid var(--border); }
  .btn.link:hover{ border-color:#d1d5db; transform:translateY(-1px); }
  .btn.link:active{ transform:translateY(0); }

  .btn .arrow{
    width:14px;
    height:14px;
    margin-left:8px;
    background:currentColor;
    display:inline-block;
    vertical-align:-2px;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M13.172 12 8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M13.172 12 8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>') center/contain no-repeat;
    transition: transform .18s var(--ease);
  }
  .btn.link:hover .arrow{ transform:translateX(3px); }

  .feature-img{
    width:100%;
    max-width:560px;
    height:auto;
    display:block;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .reveal{opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  }