:root{
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --ease: cubic-bezier(.16,1,.3,1);
  }

  html[data-theme="dark"]{
    --bg: #14120b;
    --bg-elevated: #1b1811;
    --bg-card: #1d1a12;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --text: #f3f1ea;
    --text-dim: #a39c8a;
    --text-faint: #6f6a5c;
    --btn-bg: #f3f1ea;
    --btn-text: #14120b;
    --accent: #ff6a39;
    --accent-green:#7fd1a3;
    --code-bg: #0e0c07;
    --overlay: rgba(20,18,11,0.7);
  }

  html[data-theme="light"]{
    --bg: #faf9f6;
    --bg-elevated: #ffffff;
    --bg-card: #f2f0ea;
    --border: rgba(20,18,11,0.08);
    --border-strong: rgba(20,18,11,0.14);
    --text: #14120b;
    --text-dim: #6b6558;
    --text-faint: #9a9384;
    --btn-bg: #14120b;
    --btn-text: #faf9f6;
    --accent: #d9481f;
    --accent-green:#2f9e5f;
    --code-bg: #efece4;
    --overlay: rgba(250,249,246,0.7);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    transition: background .4s var(--ease), color .4s var(--ease);
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  ::selection{background:var(--accent); color:#fff;}
  svg{display:block;}

  .wrap{max-width:1300px; margin:0 auto; padding:0 40px;}

  header{
    position:sticky; top:0; z-index:100;
    background:var(--overlay);
    backdrop-filter: blur(14px);
    border-bottom:1px solid transparent;
    transition: border-color .3s var(--ease), background .4s var(--ease);
  }
  header.scrolled{border-bottom-color:var(--border);}
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .logo{
    display:flex; align-items:center; gap:9px;
    font-weight:600; font-size:17px; letter-spacing:-0.01em;
  }
  .nav-center{display:flex; align-items:center; gap:2px;}
  .nav-item{position:relative;}
  .nav-link{
    display:flex; align-items:center; gap:5px;
    padding:8px 14px; border-radius:8px;
    font-size:14px; color:var(--text-dim);
    transition:color .2s, background .2s;
  }
  .nav-link:hover{color:var(--text); background:var(--border);}
  .nav-link svg{width:10px; height:10px; transition:transform .25s var(--ease);}
  .nav-item.open .nav-link svg{transform:rotate(180deg);}
  .nav-item.open .nav-link{color:var(--text); background:var(--border);}

  .dropdown{
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translate(-50%, -8px);
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:14px;
    padding:8px;
    min-width:180px;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.35);
    opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav-item.open .dropdown{opacity:1; pointer-events:auto; transform:translate(-50%,0);}
  .dropdown a{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 12px; border-radius:8px;
    font-size:13.5px; color:var(--text-dim);
    transition:background .15s, color .15s;
  }
  .dropdown a:hover{background:var(--border); color:var(--text);}
  .dropdown a svg{width:11px; height:11px; opacity:.5;}

  .nav-right{display:flex; align-items:center; gap:10px;}
  .btn{
    padding:9px 16px; border-radius:100px; font-size:13.5px; font-weight:500;
    transition:transform .18s var(--ease), background .2s, opacity .2s;
    white-space:nowrap;
  }
  .btn:active{transform:scale(0.96);}
  .btn-ghost{color:var(--text-dim);}
  .btn-ghost:hover{color:var(--text);}
  .btn-outline{border:1px solid var(--border-strong); color:var(--text);}
  .btn-outline:hover{background:var(--border);}
  .btn-solid{background:var(--btn-bg); color:var(--btn-text); display:inline-flex; align-items:center; gap:6px;}
  .btn-solid:hover{opacity:.85;}
  .btn-solid svg{width:12px; height:12px;}

  .hero{ padding:110px 0 60px; text-align:left; }
  .hero h1{
    font-size:clamp(34px, 5vw, 56px);
    font-weight:600; letter-spacing:-0.03em; line-height:1.05; max-width:820px;
    opacity:0; transform:translateY(16px); animation: rise .8s var(--ease) forwards;
  }
  .hero p{
    margin-top:18px; font-size:18px; color:var(--text-dim); max-width:520px;
    opacity:0; transform:translateY(16px); animation: rise .8s var(--ease) .1s forwards;
  }
  @keyframes rise{ to{opacity:1; transform:translateY(0);} }

  .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:56px; }
  .card{
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    opacity:0; transform:translateY(24px);
    transition:transform .5s var(--ease), opacity .5s var(--ease), border-color .3s;
  }
  .card.visible{opacity:1; transform:translateY(0);}
  .card:hover{border-color:var(--border-strong);}
  .card:nth-child(2){transition-delay:.08s;}
  .card:nth-child(3){transition-delay:.16s;}

  .card-visual{
    position:relative; height:300px;
    background:
      radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.08), transparent 55%),
      linear-gradient(160deg, #2a2419, #100e09 70%);
    display:flex; align-items:center; justify-content:center;
    padding:16px; overflow:hidden;
  }
  html[data-theme="light"] .card-visual{
    background:
      radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.6), transparent 55%),
      linear-gradient(160deg, #ece7db, #d9d2c1 70%);
  }
  .card-body{padding:22px 22px 26px;}
  .card-body h3{font-size:17px; font-weight:600; margin-bottom:8px;}
  .card-body p{font-size:14px; color:var(--text-dim); line-height:1.5; margin-bottom:16px;}

  .mini-btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 15px; border-radius:100px; font-size:13px; font-weight:500;
    background:var(--btn-bg); color:var(--btn-text);
    transition:opacity .2s, transform .18s var(--ease);
  }
  .mini-btn:hover{opacity:.85;}
  .mini-btn:active{transform:scale(.96);}
  .mini-btn svg{width:11px; height:11px;}

  .shell-tabs{
    display:flex; align-items:center; gap:18px;
    margin-bottom:12px;
  }
  .shell-tab{
    font-size:13px; color:var(--text-faint); font-weight:600;
    padding:0 0 8px 0; border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
  }
  .shell-tab:hover{color:var(--text-dim);}
  .shell-tab.active{color:var(--text); border-color:var(--accent);}

  .code-pill{
    display:flex; align-items:center; gap:10px;
    background:var(--code-bg); border:1px solid var(--border); border-radius:100px;
    padding:9px 8px 9px 16px;
    font-family:"SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size:12.5px; color:var(--text-dim);
    max-width:100%;
  }
  .code-pill .cmd-text{
    flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .code-pill .copy-btn{
    flex-shrink:0; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--border); color:var(--text-dim);
    transition:background .2s, color .2s, transform .15s;
    position:relative;
  }
  .code-pill .copy-btn:hover{background:var(--border-strong); color:var(--text);}
  .code-pill .copy-btn:active{transform:scale(.9);}
  .code-pill .copy-btn svg{width:13px; height:13px;}
  .copy-toast{
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--btn-bg); color:var(--btn-text); font-size:10.5px; font-weight:600;
    padding:4px 8px; border-radius:6px; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .copy-btn.copied .copy-toast{opacity:1; transform:translateX(-50%) translateY(0);}

  .mock-app{
    width:100%; height:100%; display:flex; gap:0;
    background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; box-shadow:0 20px 45px -15px rgba(0,0,0,.5);
    font-size:10.5px;
  }
  .mock-chat{ width:44%; border-right:1px solid var(--border); display:flex; flex-direction:column; }
  .mock-chat-head{ padding:9px 12px; border-bottom:1px solid var(--border); font-weight:600; color:var(--text); font-size:10.5px; }
  .mock-chat-body{ flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
  .msg-user{ align-self:flex-start; background:var(--border); color:var(--text); padding:6px 9px; border-radius:8px; font-size:10px; max-width:100%; }
  .msg-line{color:var(--text-dim); font-size:9.5px; line-height:1.5;}
  .msg-line.status{color:var(--accent); display:flex; align-items:center; gap:5px;}
  .msg-thumb{ margin-top:4px; border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--code-bg); }
  .msg-thumb .lbl{font-size:8.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em;}
  .msg-thumb .title{font-size:9.5px; font-weight:600; margin:2px 0;}
  .msg-thumb .desc{font-size:8.5px; color:var(--text-dim); line-height:1.4;}
  .mock-chat-input{
    margin-top:auto; border-top:1px solid var(--border); padding:8px 12px;
    display:flex; align-items:center; justify-content:space-between; color:var(--text-faint); font-size:9px;
  }
  .composer-badge{ font-size:8px; background:var(--border); padding:2px 6px; border-radius:100px; }

  .mock-editor{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .mock-tabs{ display:flex; border-bottom:1px solid var(--border); }
  .mock-tab{ padding:8px 10px; font-size:9px; color:var(--text-faint); border-right:1px solid var(--border); white-space:nowrap; }
  .mock-tab.active{ color:var(--text); background:var(--bg-card); }
  .mock-code{ flex:1; padding:10px 12px; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:8.6px; line-height:1.65; color:var(--text-faint); overflow:hidden; }
  .code-kw{color:#c792ea;} .code-fn{color:#82aaff;} .code-str{color:#c3e88d;} .code-cm{color:#546e7a;} .code-tp{color:#ffcb6b;}

  .spinner{ width:9px; height:9px; border-radius:50%; border:2px solid var(--text-faint); border-top-color:var(--accent); animation:spin 0.8s linear infinite; flex-shrink:0;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .mock-terminal{
    width:100%; height:100%; background:#0d0b06; border-radius:12px; border:1px solid var(--border);
    display:flex; flex-direction:column; box-shadow:0 20px 45px -15px rgba(0,0,0,.5);
    font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11px; color:#c9c2ab; overflow:hidden;
  }
  .term-titlebar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
  .term-titlebar span.name{ margin-left:6px; color:#8b8470; font-size:10px; }
  .term-body{ padding:14px; display:flex; flex-direction:column; gap:9px; flex:1; }
  .term-path{ color:#6f6a5c; font-size:10px; }
  .term-row{ display:flex; align-items:flex-start; gap:6px; }
  .term-check{ color:#6f6a5c; }
  .term-check.done{ color:var(--accent-green); }
  .term-input-row{
    margin-top:auto; display:flex; align-items:center; gap:8px;
    border-top:1px solid rgba(255,255,255,.06); padding-top:10px;
    color:#8b8470; font-size:10.5px;
  }
  .term-footer{ display:flex; justify-content:space-between; color:#5c5748; font-size:9px; }
  .term-accent{color:var(--accent);}

  .mock-phone{
    width:200px; height:270px; background:var(--bg-elevated); border:1px solid var(--border);
    border-radius:24px; padding:14px 12px; font-size:10px; display:flex; flex-direction:column;
    box-shadow:0 25px 50px -15px rgba(0,0,0,.55);
  }
  .phone-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .phone-tabs{ display:flex; gap:14px; font-size:10.5px; font-weight:600; }
  .phone-tabs span:first-child{color:var(--text);}
  .phone-tabs span:last-child{color:var(--text-faint); font-weight:400;}
  .phone-avatar{ width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#ff8a5c,#d9481f); flex-shrink:0; }
  .phone-scroll{ flex:1; overflow:hidden; }
  .phone-day{ color:var(--text-faint); font-size:8.5px; margin:8px 0 4px; text-transform:uppercase; letter-spacing:.05em; }
  .phone-task{ padding:5px 0; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:6px;}
  .phone-task .t{font-size:9.5px; color:var(--text); margin-bottom:1px;}
  .phone-task .s{font-size:8px; color:var(--text-faint);}
  .phone-icon{ width:9px; height:9px; flex-shrink:0; margin-top:2px; color:var(--text-faint); }
  .phone-input{ margin-top:8px; border:1px solid var(--border); border-radius:100px; padding:6px 10px; font-size:8.5px; color:var(--text-faint); }

  .platform-section{padding:90px 0 40px; text-align:center;}
  .platform-section h2{ font-size:clamp(24px,3.4vw,34px); font-weight:600; letter-spacing:-0.02em; }

  .version-list{margin-top:50px; border-top:1px solid var(--border);}
  .version-row{border-bottom:1px solid var(--border);}
  .version-head{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:26px 4px; font-size:22px; font-weight:500; text-align:left;
  }
  .version-head .left{display:flex; align-items:center; gap:12px;}
  .badge{
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px;
    background:var(--accent); color:#fff; text-transform:uppercase; letter-spacing:.03em;
  }
  .chevron{width:16px; height:16px; transition:transform .3s var(--ease); color:var(--text-dim); flex-shrink:0;}
  .version-row.open .chevron{transform:rotate(180deg);}

  .version-panel{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
  .version-panel-inner{padding:0 4px 34px;}
  .os-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:left;}
  .os-col h4{
    display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-dim);
    margin-bottom:14px;
  }
  .os-col h4 svg{width:15px; height:15px;}
  .os-col a{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 0; font-size:14.5px; color:var(--text);
    border-bottom:1px solid var(--border);
    transition:color .2s, padding-left .2s;
  }
  .os-col a:hover{color:var(--accent); padding-left:4px;}
  .os-col a svg{opacity:.6; flex-shrink:0; width:15px; height:15px; transition:opacity .2s, transform .2s;}
  .os-col a:hover svg{opacity:1; transform:translateY(1px);}
  .release-link{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; color:var(--accent); font-size:14px; font-weight:500; }
  .release-link svg{width:13px; height:13px;}
  .release-link:hover{text-decoration:underline;}

  footer{ margin-top:80px; border-top:1px solid var(--border); padding:64px 0 40px; }
  .footer-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px; }
  .footer-col h5{font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; font-weight:600;}
  .footer-col a{ display:block; padding:6px 0; font-size:14px; color:var(--text-dim); transition:color .2s; }
  .footer-col a:hover{color:var(--text);}

  .footer-bottom{
    margin-top:56px; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px; border-top:1px solid var(--border); padding-top:26px;
    font-size:13px; color:var(--text-faint);
  }
  .footer-bottom .left{display:flex; align-items:center; gap:16px;}
  .soc2{display:inline-flex; align-items:center; gap:6px;}
  .soc2 svg{width:13px; height:13px; flex-shrink:0;}

  .theme-toggle{ display:flex; align-items:center; gap:2px; background:var(--bg-card); border:1px solid var(--border); border-radius:100px; padding:3px; }
  .theme-toggle button{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-faint); transition:background .2s, color .2s; }
  .theme-toggle button.active{background:var(--border-strong); color:var(--text);}
  .theme-toggle svg{width:15px; height:15px;}

  .reveal{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .reveal.visible{opacity:1; transform:translateY(0);}

  @media (max-width:900px){
    .nav-center{display:none;}
    .cards{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
    .os-grid{grid-template-columns:1fr; gap:22px;}
    .wrap{padding:0 22px;}
    .mock-chat{width:100%;} .mock-editor{display:none;}
  }