:root{
    --bg:#07111f;
    --bg2:#0d1b2a;
    --text:#ffffff;
    --muted:#9fb3c8;
    --line:rgba(255,255,255,.1);
    --blue:#4f90ff;
    --cyan:#00d1ff;
    --green:#00ffb2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Inter,"Segoe UI",system-ui,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 20% 10%,rgba(79,144,255,.22),transparent 32%),
        radial-gradient(circle at 80% 0%,rgba(0,209,255,.18),transparent 30%),
        linear-gradient(135deg,var(--bg),var(--bg2));
    min-height:100vh;
    overflow-x:hidden;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%);
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,90%);margin:auto;position:relative;z-index:1}

header{padding:24px 0}
.nav{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;gap:26px;color:var(--muted);font-size:14px}
.nav-links a:hover{color:white}

.hero{
    min-height:720px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 0 90px;
}
.kicker{
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.04);
    margin-bottom:24px;
    font-size:14px;
}
.hero h1{
    font-size:clamp(58px,8vw,96px);
    line-height:.95;
    letter-spacing:-.06em;
    margin-bottom:26px;
}
.hero h1 span{
    background:linear-gradient(90deg,#fff,#9ddfff);
    -webkit-background-clip:text;
    color:transparent;
}
.hero p{
    max-width:740px;
    margin:0 auto;
    color:var(--muted);
    font-size:20px;
    line-height:1.75;
}
.buttons{
    margin-top:38px;
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.btn{
    padding:14px 24px;
    border-radius:12px;
    border:1px solid var(--line);
    color:#eaf6ff;
    background:rgba(255,255,255,.05);
    transition:.2s;
    font-weight:600;
}
.btn.primary{
    border:none;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    color:#fff;
    box-shadow:0 12px 34px rgba(0,209,255,.24);
}
.btn:hover{transform:translateY(-3px)}

.workflow-wrap{padding:20px 0 82px}
.workflow-head{text-align:center;margin-bottom:28px}
.workflow-head h2{font-size:32px;margin-bottom:10px}
.workflow-head p{color:var(--muted)}
.workflow-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.terminal-card{
    background:rgba(3,10,22,.78);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.35);
    backdrop-filter:blur(18px);
}
.terminal-title{
    height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 18px;
    background:rgba(255,255,255,.045);
    border-bottom:1px solid var(--line);
    color:#dbeafe;
    font-size:14px;
    font-weight:600;
}
.dots{display:flex;gap:7px;margin-right:8px}
.dots i{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.25)}
.terminal-card pre{
    margin:0;
    padding:26px;
    color:var(--green);
    font-family:"Fira Code","JetBrains Mono",Consolas,monospace;
    font-size:14px;
    line-height:1.85;
    overflow-x:auto;
}
.comment{color:#6f8aa6}

.section{padding:78px 0}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:34px;margin-bottom:10px}
.section-title p{color:var(--muted)}
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.card{
    min-height:210px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.045);
    transition:.22s;
}
.card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.07);
    border-color:rgba(0,209,255,.35);
}
.icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(79,144,255,.22),rgba(0,209,255,.12));
    color:#8bdcff;
}
.icon svg{width:25px;height:25px}
.card h3{font-size:20px;margin-bottom:12px}
.card p{color:var(--muted);line-height:1.7}

footer{
    padding:46px 0 60px;
    border-top:1px solid var(--line);
    color:var(--muted);
    text-align:center;
    font-size:14px;
}

@media(max-width:900px){
    .hero{min-height:auto;padding:90px 0 72px}
    .workflow-section,.grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .hero p{font-size:17px}
}


/* i18n / layout refinements */
.lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.045);
}
.lang-switch button{
    border:0;
    cursor:pointer;
    padding:6px 10px;
    border-radius:999px;
    color:var(--muted);
    background:transparent;
    font:inherit;
    font-size:13px;
}
.lang-switch button.active{
    color:#fff;
    background:rgba(255,255,255,.12);
}
[data-lang="en"] .zh{display:none}
[data-lang="zh"] .en{display:none}

.hero h1{
    white-space:nowrap;
    background:linear-gradient(90deg,#fff,#9ddfff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero h1 span{
    color:inherit;
    background:none;
    -webkit-background-clip:initial;
}

.harness-card{
    max-width:860px;
    margin:0 auto 76px;
    padding:26px 28px;
    border:1px solid rgba(0,209,255,.26);
    border-radius:22px;
    background:
        linear-gradient(135deg,rgba(79,144,255,.14),rgba(0,209,255,.07)),
        rgba(255,255,255,.045);
    box-shadow:0 22px 70px rgba(0,209,255,.12);
}
.harness-card .label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:#8bdcff;
    font-size:14px;
    font-weight:700;
}
.harness-card h2{
    font-size:26px;
    line-height:1.3;
    margin-bottom:10px;
    letter-spacing:-.035em;
}
.harness-card p{
    color:var(--muted);
    line-height:1.75;
}
.harness-card a{
    color:#9ddfff;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px;
}

@media(max-width:900px){
    .hero h1{
        white-space:normal;
    }
    .lang-switch{
        margin-left:auto;
    }
}