/* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root{
    /* color */
    --color-primary:#4F46E5;
    --color-primary-hover:#4338CA;
    --color-primary-soft:#EEF2FF;
    --color-ink:#0F172A;
    --color-muted:#475569;
    --color-subtle:#94A3B8;
    --color-bg:#F8FAFC;
    --color-bg-tint:#EEF1F9;
    --color-surface:#FFFFFF;
    --color-border:#E2E8F0;
    --color-wire:#5B7FDE;

    /* typography */
    --font-family:'Inter',system-ui,sans-serif;
    --text-xs:.78rem;
    --text-sm:.9rem;
    --text-base:1.05rem;
    --text-lg:1.15rem;
    --text-display:clamp(2.5rem,4.4vw,3.7rem);

    /* spacing */
    --space-1:6px; --space-2:12px; --space-3:18px;
    --space-4:24px; --space-5:32px; --space-6:44px; --space-7:60px;

    /* radius & shadow */
    --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-pill:999px;
    --shadow-sm:0 2px 10px rgba(15,23,42,.05);
    --shadow-md:0 10px 30px rgba(15,23,42,.08);
    --shadow-lg:0 20px 50px rgba(15,23,42,.12);

    /* motion */
    --ease-out:cubic-bezier(.22,1,.36,1);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:var(--font-family);
    background:linear-gradient(135deg,#FAFBFE 0%,var(--color-bg) 50%,var(--color-bg-tint) 100%);
    color:var(--color-ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;border-radius:6px}

  /* ============================================================
     LAYOUT — Page > (Content | Stage)
     ============================================================ */
  .page{
    display:grid;
    grid-template-columns:minmax(380px,42%) 1fr;
    min-height:100vh;
  }

  /* ============================================================
     LEFT — Content column
     ============================================================ */
  .content{
    display:flex;flex-direction:column;justify-content:center;
    padding:var(--space-7) var(--space-6) var(--space-6) clamp(28px,5vw,84px);
    position:relative;z-index:2;
  }

  .logo{
    width:min(300px,70%);height:auto;
    animation:rise .7s .05s var(--ease-out) both;
  }
  .sub{
    margin-top:var(--space-2);
    color:var(--color-subtle);font-weight:500;font-size:var(--text-base);
    animation:rise .7s .12s var(--ease-out) both;
  }
  .sub b{color:var(--color-primary);font-weight:700}

  .badge{
    display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    margin-top:var(--space-6);
    background:var(--color-primary-soft);color:var(--color-primary);
    font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;
    padding:10px 20px;border-radius:var(--radius-pill);
    animation:rise .7s .2s var(--ease-out) both;
  }
  .badge .dot{
    width:9px;height:9px;border-radius:50%;background:var(--color-primary);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(79,70,229,.45)}
    50%{transform:scale(1.15);opacity:.85;box-shadow:0 0 0 7px rgba(79,70,229,0)}
  }

  h1{
    font-size:var(--text-display);
    font-weight:800;letter-spacing:-.03em;line-height:1.1;
    margin-top:var(--space-3);
    animation:rise .7s .28s var(--ease-out) both;
  }
  h1 .accent{color:var(--color-primary)}

  .desc{
    margin-top:var(--space-4);max-width:540px;
    font-size:var(--text-base);font-weight:500;color:var(--color-muted);line-height:1.7;
    animation:rise .7s .36s var(--ease-out) both;
  }

  .features{
    display:flex;margin-top:var(--space-5);max-width:540px;
    animation:rise .7s .44s var(--ease-out) both;
  }
  .feature{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
    text-align:center;font-size:var(--text-sm);font-weight:600;color:var(--color-muted);line-height:1.4;
    padding:0 var(--space-3);
  }
  .feature + .feature{border-left:1.5px solid var(--color-border)}
  .feature svg{width:34px;height:34px;stroke:var(--color-ink)}

  .cta{
    display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
    margin-top:var(--space-6);
    background:var(--color-primary);color:#fff;text-decoration:none;
    font-size:var(--text-base);font-weight:700;
    padding:16px 34px;border-radius:14px;
    box-shadow:0 10px 26px rgba(79,70,229,.32);
    transition:background .18s,transform .18s,box-shadow .18s;
    animation:rise .7s .52s var(--ease-out) both;
  }
  .cta .arr{transition:transform .18s}
  .cta:hover{background:var(--color-primary-hover);transform:translateY(-3px);box-shadow:0 16px 34px rgba(79,70,229,.4)}
  .cta:hover .arr{transform:translateX(5px)}

  .secondary{
    margin-top:var(--space-5);max-width:540px;
    font-size:var(--text-sm);font-weight:500;color:var(--color-subtle);line-height:1.65;
    animation:rise .7s .6s var(--ease-out) both;
  }
  .secondary b{color:var(--color-muted)}

  .partnerline{
    margin-top:var(--space-4);font-size:var(--text-xs);font-weight:600;color:#A6ADC2;
    animation:rise .7s .66s var(--ease-out) both;
  }
  .partnerline a{
    color:var(--color-primary);text-decoration:none;border-bottom:1.5px solid #CBD0F5;
    transition:border-color .15s;
  }
  .partnerline a:hover{border-color:var(--color-primary)}

  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

  /* ============================================================
     RIGHT — hero illustration (image placeholder)
     ============================================================ */
  .stage{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-graphic{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    display:block;
    animation:rise .8s .2s var(--ease-out) both;
  }

  @media (max-width:1020px){
    .page{grid-template-columns:1fr;grid-template-rows:auto auto}
    .stage{grid-row:1;min-height:44vh;padding:32px 24px}
    .content{grid-row:2;padding:var(--space-5) 26px var(--space-6);align-items:center;text-align:center}
    .badge,.cta{align-self:center}
    .features,.desc,.secondary{margin-left:auto;margin-right:auto}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition:none !important}
  }