:root{ color-scheme:light; --page-background:#f8fbff; --hero-background:#f8faff; --action-gradient:linear-gradient(107.5deg, rgb(255,76,78) 0%, rgb(250,85,174) 45%, rgb(88,129,239) 100%); }
  *{ box-sizing: border-box; }
  /* The whole icon/dashboard sequence is now 100% automatic and scroll-independent (see the
     script), so there's no more need to hijack scrolling — the page just scrolls normally,
     like any other page, to reach the footer. */
  html,body{
    margin:0; padding:0;
    font-family:'Pretendard', -apple-system, sans-serif;
    background:var(--page-background);
    color:#0A121A;
  }

  .hero-pin{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--page-background);
  }

  .page-content{
    position:relative;
    width:100%;
    min-height:100svh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    z-index:1;
  }
  .page-content > .stage{ flex-shrink:0; }

  /* A capped, fluid layout: typography and controls never scale with the canvas. */
  .stage{
    position:relative;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:160px 0 69px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:86px;
  }

  /* Background has its own dimensions; the fade always ends at its bottom edge. */
  .hero-background{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:1205px;
    overflow:hidden;
    background:var(--hero-background);
    pointer-events:none;
  }
  .bg-glow{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    opacity:0.54;
  }
  .bottom-fade{
    position:absolute;
    left:0; right:0; bottom:0;
    height:477px;
    background:linear-gradient(180.93158deg, rgba(248,251,255,0) 0.37184%, var(--page-background) 95.697%);
  }

  /* Header stays pinned while the page scrolls normally. */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    height:56px;
    background:#fcfdfe;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 40px;
    z-index:100;
  }
  .site-header .header-inner{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .site-header img{ display:block; }

  /* Floating icons */
  /* Icons tuck behind the dashboard throughout the automatic sequence. */
  .icon-layer{ position:absolute; inset:0; z-index:6; pointer-events:none; }
  .hero-icon{
    position:absolute;
    opacity:0;
    transform:translate(-50%,-50%);
    will-change: transform, opacity;
  }
  .hero-icon-card{
    width:100%;
    height:100%;
    border-radius:22%;
    background:#fff;
    box-shadow:0 4px 24px 0 rgba(59,120,201,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .hero-icon-card img{
    width:92%;
    height:92%;
    object-fit:contain;
    image-rendering:auto;
  }

  .hero-text{
    position:relative;
    opacity:0;
    visibility:hidden;
    transform:translateY(138px);
    width:min(760px, calc(100% - 48px));
    text-align:center;
    z-index:10;
  }
  .hero-text h1{
    margin:0 0 36px;
    font-weight:500;
    font-size:57px;
    line-height:68px;
    letter-spacing:-1.14px;
    word-break:keep-all;
  }
  .hero-text h1 .grad{
    font-weight:600;
    white-space:nowrap;
    background:linear-gradient(89.3deg, rgb(255,29,32) 6%, rgb(217,50,140) 51%, rgb(47,102,255) 108%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-btn{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    gap:4px;
    padding:10px 16px 10px 24px;
    border-radius:100px;
    background:var(--action-gradient);
    color:#fff;
    font-weight:600;
    font-size:22px;
    letter-spacing:-0.44px;
    text-decoration:none;
    box-shadow:0 4px 7px rgba(115,124,188,0.5);
    transition:transform 220ms ease, box-shadow 220ms ease;
  }
  .hero-btn svg{ width:20px; height:20px; transition:transform 220ms ease; }
  @media (hover:hover) and (pointer:fine){
    .hero-btn:hover{ transform:translateY(-2px); box-shadow:0 7px 14px rgba(115,124,188,0.35); }
    .hero-btn:hover svg{ transform:translateX(3px); }
  }
  .hero-btn:active{ transform:translateY(0) scale(0.98); }
  .hero-btn:focus-visible{ outline:3px solid #426be0; outline-offset:5px; }
  button, input, select, textarea{ font:inherit; }
  button{ cursor:pointer; }
  .hero-actions{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
  .inquiry-button{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:10px 25px; border:1px solid #cbd6ec;
    border-radius:100px; background:#fff; color:#354c78;
    font-size:18px; font-weight:400; text-decoration:none;
  }
  .header-inquiry{ min-height:36px; padding:8px 18px; font-size:14px; background:#edf2ff; border-color:transparent; }
  .inquiry-button:hover{ background:#e9efff; }
  .inquiry-button:focus-visible, .inquiry-dialog :focus-visible{ outline:3px solid #426be0; outline-offset:3px; }
  html.inquiry-open{ overflow:hidden; }
  .inquiry-dialog{
    width:min(600px, calc(100% - 32px)); max-height:calc(100dvh - 32px);
    padding:32px; border:1px solid #e1e7f2; border-radius:24px;
    background:#fff; color:#0a121a; box-shadow:0 24px 80px #172e5933;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .inquiry-dialog::backdrop{ background:rgba(17,31,55,0.48); backdrop-filter:blur(5px); }
  .inquiry-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .inquiry-heading h2{ margin:4px 0 12px; font-size:28px; letter-spacing:-0.8px; }
  .inquiry-eyebrow{ margin:0; color:#536ac0; font-size:12px; font-weight:700; letter-spacing:1px; }
  .inquiry-close{ flex-shrink:0; width:36px; height:36px; border:0; border-radius:50%; background:#f0f3f9; color:#465776; font-size:26px; line-height:1; }
  .inquiry-description{ margin:0 0 24px; color:#627087; font-size:14px; line-height:1.65; word-break:keep-all; }
  .inquiry-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  .inquiry-field{ display:flex; flex-direction:column; gap:8px; min-width:0; font-size:14px; font-weight:600; }
  .inquiry-field-wide{ grid-column:1 / -1; }
  .inquiry-field small{ color:#748198; font-weight:400; }
  .inquiry-field input, .inquiry-select-trigger, .inquiry-field textarea{
    width:100%; min-height:46px; padding:12px; border:1px solid #cbd5e5;
    border-radius:10px; background:#fbfcff; color:#17263e; font-size:16px; font-weight:400;
  }
  .inquiry-field textarea{ min-height:120px; resize:vertical; line-height:1.6; }
  .inquiry-field input:focus, .inquiry-field textarea:focus, .inquiry-select-trigger:focus{
    outline:none; border-color:#637ce0; box-shadow:none;
  }
  .inquiry-field [aria-invalid="true"], .inquiry-field [aria-invalid="true"]:focus{ border-color:#d63749; }
  .inquiry-error{ margin:0; color:#d63749; font-size:12px; font-weight:400; line-height:1.5; }
  .inquiry-consent > .inquiry-error{ margin-top:8px; }
  .inquiry-consent-label input[aria-invalid="true"]{ outline:1px solid #d63749; outline-offset:2px; }
  .inquiry-select{ position:relative; }
  .inquiry-select-trigger{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:18px; text-align:left; }
  .inquiry-select-trigger svg{ width:18px; height:18px; flex-shrink:0; color:#748198; }
  .inquiry-select-trigger[aria-expanded="true"]{ border-color:#8199ea; background:#fff; }
  .inquiry-select-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .inquiry-select-options{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
    margin:0; padding:6px; list-style:none; max-height:224px; overflow-y:auto;
    overscroll-behavior:contain; border:1px solid #dce4f3; border-radius:12px;
    background:#fff; box-shadow:0 10px 28px #233e6e26;
  }
  .inquiry-select-options [role="option"]{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:10px 12px; border-radius:8px; color:#435773; font-size:14px; font-weight:400; cursor:pointer; }
  .inquiry-select-options [role="option"]:hover, .inquiry-select-options .is-active{ background:#f0f4ff; }
  .inquiry-select-options [aria-selected="true"]{ color:#4869d8; background:#edf2ff; font-weight:600; }
  .inquiry-select-options [aria-selected="true"]::after{ content:'✓'; }
  .inquiry-consent{ margin-top:20px; padding-top:20px; border-top:1px solid #e5eaf3; }
  .inquiry-consent-row{ display:flex; align-items:flex-start; gap:10px; }
  .inquiry-consent-label{ display:flex; align-items:flex-start; flex:1; gap:9px; font-size:14px; line-height:1.6; color:#435773; cursor:pointer; word-break:keep-all; }
  .inquiry-consent-label input{ flex-shrink:0; width:18px; height:18px; margin:2px 0 0; accent-color:#637ce0; }
  .inquiry-privacy-toggle{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; padding:0; min-height:24px; border:0; background:none; color:#627087; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
  .inquiry-privacy-toggle svg{ width:14px; height:14px; }
  .inquiry-privacy-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .inquiry-privacy{ margin-top:14px; padding:18px; border:1px solid #e1e7f2; border-radius:12px; background:#f7f9fd; color:#627087; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
  .inquiry-privacy h3{ margin:0 0 14px; color:#354763; font-size:14px; }
  .inquiry-privacy p{ margin:0 0 16px; }
  .inquiry-privacy p:last-child{ margin-bottom:0; }
  .inquiry-submit{ width:100%; min-height:48px; margin-top:24px; border:0; border-radius:12px; background:var(--action-gradient); color:#fff; font-weight:600; box-shadow:0 4px 7px rgba(115,124,188,0.3); }
  .inquiry-submit:hover{ box-shadow:0 7px 14px rgba(115,124,188,0.35); }
  .inquiry-status{ margin:14px 0 0; color:#405db0; font-size:13px; line-height:1.6; }
  .inquiry-status:empty{ display:none; }
  @media (max-width:767px){
    .hero-actions{ gap:10px; }
    .hero-actions .inquiry-button{ min-height:40px; padding:8px 18px; font-size:16px; }
    .inquiry-dialog{ padding:24px 20px; border-radius:20px; }
    .inquiry-fields{ grid-template-columns:1fr; gap:16px; }
    .inquiry-heading h2{ font-size:24px; }
  }
  @media (prefers-reduced-motion:reduce){
    .hero-btn, .hero-btn svg{ transition:none; }
    .hero-btn:hover, .hero-btn:active, .hero-btn:hover svg{ transform:none; }
  }

  .dashboard-wrap{
    position:relative;
    width:min(1024px, calc(100% - 80px));
    opacity:0;
    transform:translateY(180px);
    border-radius:40px;
    padding:12px;
    background:#fff;
    box-shadow:2px 2px 14px 0 rgba(197,208,230,0.8), 8px 8px 20px 0 rgba(189,210,238,0.59);
    z-index:8;
  }
  /* Figma's inner bevel sits above the screenshot, so the image cannot cover it. */
  .dashboard-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 6px 5px 20px 0 #f9fbff, inset -8px -8px 10px 0 #e2eaf4;
    pointer-events:none;
    z-index:1;
  }
  .dashboard-wrap img{
    width:100%;
    height:auto;
    display:block;
    border-radius:28px;
    border:1px solid #e6ebf5;
  }

  /* Stay below the content, using spare viewport space above the footer on tall screens. */
  .site-footer{
    position:relative;
    flex-shrink:0;
    width:100%;
    margin-top:auto;
    background:var(--page-background);
    padding:24px 40px calc(40px + env(safe-area-inset-bottom, 0px));
    z-index:15;
  }
  .footer-inner{ max-width:1280px; margin:0 auto; }
  .footer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-bottom:12px;
    border-bottom:1px solid #d5dce8;
    flex-wrap:wrap;
  }
  .footer-brand img.chai-logo{ display:block; height:18px; margin-bottom:12px; }
  .footer-lines{ display:flex; flex-direction:column; gap:4px; }
  .footer-row{
    display:flex; align-items:center; gap:5px; flex-wrap:wrap;
    font-size:12px; line-height:16px; color:#6b7f94; letter-spacing:-0.24px;
  }
  .footer-row span.div{ width:1px; height:12px; background:#c5cddb; display:inline-block; }
  .footer-brand-right{ flex-shrink:0; }
  .footer-copy{ padding-top:12px; font-size:12px; line-height:16px; color:#6b7f94; letter-spacing:-0.24px; }
  @media (max-width:1199px){
    .stage{ padding-top:180px; gap:100px; }
    .hero-text h1{ font-size:42px; }
  }
  @media (max-width:767px){
    .site-header{ padding:0 20px; background:#fcfdfe; }
    
    .hero-background{ height:730px; }
    .bottom-fade{ height:289px; }
    .stage{ min-height:746px; padding:168px 0 126px; gap:46px; }
    .hero-text{ width:min(370px, calc(100% - 50px)); display:flex; flex-direction:column; align-items:center; }
    .hero-text h1{ font-size:clamp(28px, calc(12vw - 10.4px), 40px); line-height:1.2; letter-spacing:-0.04em; margin-bottom:20px; }
    .hero-text h1 .grad{ display:block; letter-spacing:-0.02em; }
    .hero-btn{ min-height:40px; height:40px; padding:4px 12px 4px 18px; font-size:16px; line-height:22px; letter-spacing:-0.32px; }
    .hero-btn svg{ width:16px; height:16px; }
    .hero-icon-card{ border-radius:32px; }
    .dashboard-wrap{ width:calc(100% - 40px); aspect-ratio:370 / 218; padding:8px; border-radius:22px; overflow:hidden; }
    .dashboard-wrap img{ height:100%; object-fit:cover; object-position:top; border-radius:12px; }
    .site-footer{ padding:24px 20px calc(40px + env(safe-area-inset-bottom, 0px)); }
    .footer-top{ flex-direction:column; align-items:flex-start; gap:18px; }
    .footer-brand{ width:100%; }
    .footer-brand img.chai-logo{ height:16px; }
    .footer-row{ line-height:16px; overflow-wrap:anywhere; }
    .footer-copy{ padding-top:24px; }
  }