:root{
    --bg:#f4f7fb;
    --surface:#ffffff;
    --surface-2:#eef4ff;
    --ink:#0f172a;
    --muted:#64748b;
    --line:#dbe5f2;
    --blue:#2563eb;
    --blue-2:#1d4ed8;
    --cyan:#0ea5e9;
    --violet:#4f46e5;
    --shadow:0 24px 70px rgba(15,23,42,.10);
    --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:"Heebo",Arial,sans-serif;
    background:
        radial-gradient(circle at 8% 10%,rgba(37,99,235,.08),transparent 24%),
        radial-gradient(circle at 92% 22%,rgba(79,70,229,.07),transparent 26%),
        var(--bg);
    color:var(--ink);
    line-height:1.65;
}
a{color:inherit}
.site-header{
    width:min(1220px,calc(100% - 28px));
    min-height:72px;
    margin:14px auto 0;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:sticky;
    top:10px;
    z-index:100;
    border:1px solid rgba(203,213,225,.78);
    border-radius:18px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(15,23,42,.08);
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}
.brand-mark{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,var(--blue),var(--violet));
    color:#fff;
    font-family:Inter,sans-serif;
    font-size:18px;
    font-weight:800;
    box-shadow:0 10px 24px rgba(37,99,235,.24);
}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-size:16px;color:#0b4ca3}
.brand-copy small{margin-top:4px;color:var(--muted);font-size:10px}
.header-nav{display:flex;align-items:center;gap:6px}
.header-nav a{
    padding:9px 12px;
    border-radius:11px;
    text-decoration:none;
    color:#475569;
    font-size:13px;
    font-weight:800;
}
.header-nav a:hover{background:#f1f5f9;color:var(--blue)}
.header-nav .header-cta{
    background:var(--blue);
    color:#fff;
    box-shadow:0 8px 20px rgba(37,99,235,.20);
}
main{width:min(1220px,calc(100% - 28px));margin:0 auto}
.hero{
    min-height:610px;
    margin-top:18px;
    padding:72px clamp(28px,5vw,72px);
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    align-items:center;
    gap:46px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:30px;
    background:
        linear-gradient(125deg,#07152f 0%,#0b2250 42%,#102d69 100%);
    box-shadow:0 30px 90px rgba(15,23,42,.18);
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:
        linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(8px);z-index:-1}
.hero-glow-a{width:420px;height:420px;right:-150px;top:-150px;background:rgba(37,99,235,.32)}
.hero-glow-b{width:360px;height:360px;left:-130px;bottom:-150px;background:rgba(79,70,229,.20)}
.eyebrow{
    display:inline-flex;
    padding:7px 11px;
    border:1px solid rgba(147,197,253,.25);
    border-radius:999px;
    background:rgba(37,99,235,.13);
    color:#93c5fd;
    font-family:Inter,sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}
.hero h1{
    max-width:780px;
    margin:20px 0 18px;
    color:#fff;
    font-size:clamp(42px,5.6vw,76px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-2.5px;
}
.hero h1 span{
    color:transparent;
    background:linear-gradient(90deg,#60a5fa,#67e8f9,#a5b4fc);
    background-clip:text;
    -webkit-background-clip:text;
}
.hero-lead{
    max-width:720px;
    margin:0;
    color:#cbd5e1;
    font-size:clamp(16px,1.7vw,19px);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border-radius:13px;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.30)}
.btn-secondary{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff}
.trust-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px;color:#bfdbfe;font-size:12px;font-weight:800}
.hero-visual{min-height:420px;position:relative;display:grid;place-items:center}
.visual-card{
    width:min(390px,100%);
    aspect-ratio:1/1;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:32px;
    background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
    box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18);
}
.visual-card img{width:100%;height:100%;object-fit:cover}
.windows-logo-fallback{
    width:58%;
    aspect-ratio:1;
    display:none;
    grid-template-columns:1fr 1fr;
    gap:8px;
    transform:perspective(500px) rotateY(-8deg);
}
.windows-logo-fallback span{background:linear-gradient(145deg,#38bdf8,#2563eb);box-shadow:0 10px 35px rgba(14,165,233,.20)}
.status-card{
    position:absolute;
    min-width:190px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:15px;
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 35px rgba(0,0,0,.18);
    color:#0f172a;
}
.status-card b,.status-card small{display:block}
.status-card b{font-size:13px}
.status-card small{margin-top:3px;color:#64748b;font-size:10px}
.status-top{top:42px;right:-12px}
.status-bottom{bottom:46px;left:-20px}
.section{padding:84px 0}
.section-heading{max-width:780px;margin:0 auto 36px;text-align:center}
.section-heading>span,.panel-label{
    color:var(--blue);
    font-family:Inter,sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.1px;
}
.section-heading h2,.panel h2{
    margin:8px 0 10px;
    font-size:clamp(28px,3.6vw,44px);
    line-height:1.1;
    letter-spacing:-1px;
}
.section-heading p{margin:0;color:var(--muted);font-size:15px}
.section-heading.compact{margin-bottom:28px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature-card{
    min-height:230px;
    padding:24px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface);
    box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.feature-card::after{
    content:"";
    width:130px;height:130px;
    position:absolute;left:-50px;bottom:-60px;
    border-radius:50%;
    background:rgba(37,99,235,.055);
}
.feature-number{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--blue);
    font-family:Inter,sans-serif;
    font-size:12px;
    font-weight:800;
}
.feature-card h3{margin:22px 0 8px;font-size:18px}
.feature-card p{margin:0;color:var(--muted);font-size:13px}
.workflow-section{padding-top:38px}
.workflow{
    display:grid;
    grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;
    align-items:center;
}
.workflow-item{
    min-height:160px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
}
.workflow-item>b{
    width:36px;height:36px;
    display:grid;place-items:center;
    border-radius:10px;
    background:var(--blue);
    color:#fff;
    font-family:Inter,sans-serif;
}
.workflow-item h3{margin:15px 0 5px;font-size:16px}
.workflow-item p{margin:0;color:var(--muted);font-size:12px}
.workflow-line{height:2px;background:linear-gradient(90deg,#bfdbfe,#2563eb,#bfdbfe)}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:38px}
.panel{
    min-height:260px;
    padding:30px;
    border:1px solid #bfdbfe;
    border-radius:22px;
    background:linear-gradient(145deg,#eff6ff,#fff);
}
.panel-warning{border-color:#fde68a;background:linear-gradient(145deg,#fffbeb,#fff)}
.panel h2{font-size:28px}
.panel p{margin:0;color:#475569;font-size:14px}
.faq-section{padding-top:50px}
.faq-grid{max-width:900px;margin:0 auto;display:grid;gap:10px}
.faq-grid details{
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 18px rgba(15,23,42,.035);
}
.faq-grid summary{
    padding:17px 19px;
    cursor:pointer;
    color:#174f9f;
    font-weight:900;
}
.faq-grid details p{margin:0;padding:0 19px 18px;color:var(--muted);font-size:13px}
.cta-section{
    margin:20px 0 44px;
    padding:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-radius:24px;
    background:linear-gradient(120deg,#1d4ed8,#4338ca);
    color:#fff;
    box-shadow:var(--shadow);
}
.cta-section span{font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:1.2px;color:#bfdbfe}
.cta-section h2{margin:5px 0 5px;font-size:28px;line-height:1.15}
.cta-section p{margin:0;color:#dbeafe;font-size:13px}
.btn-light{flex:0 0 auto;background:#fff;color:#1d4ed8;box-shadow:0 12px 28px rgba(15,23,42,.18)}
footer{
    width:min(1220px,calc(100% - 28px));
    margin:0 auto 24px;
    padding:20px 4px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#64748b;
    font-size:11px;
}
footer strong{color:#174f9f;font-size:13px}
footer a{margin-right:auto;color:var(--blue);font-weight:800;text-decoration:none}
@media(max-width:920px){
    .hero{grid-template-columns:1fr;padding:54px 28px}
    .hero-content{text-align:center}
    .hero-lead{margin-inline:auto}
    .hero-actions,.trust-row{justify-content:center}
    .hero-visual{min-height:360px}
    .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .workflow{grid-template-columns:1fr;gap:10px}
    .workflow-line{width:2px;height:20px;margin:auto}
}
@media(max-width:680px){
    .site-header{min-height:62px;padding:8px 9px}
    .brand-mark{width:42px;height:42px}
    .brand-copy small{display:none}
    .header-nav>a:not(.header-cta){display:none}
    .header-nav .header-cta{padding:8px 10px;font-size:11px}
    main{width:min(100% - 14px,1220px)}
    .hero{margin-top:8px;padding:42px 18px;border-radius:22px}
    .hero h1{font-size:40px;letter-spacing:-1.5px}
    .hero-lead{font-size:14px}
    .hero-visual{min-height:310px}
    .visual-card{width:min(300px,85vw);border-radius:24px}
    .status-card{min-width:155px;padding:9px 10px}
    .status-top{right:0;top:26px}
    .status-bottom{left:0;bottom:26px}
    .section{padding:58px 0}
    .section-heading{margin-bottom:24px;padding-inline:8px}
    .feature-grid{grid-template-columns:1fr}
    .feature-card{min-height:auto}
    .split-section{grid-template-columns:1fr}
    .cta-section{padding:26px 20px;display:block;text-align:center}
    .cta-section .btn{margin-top:18px}
    footer{display:grid;text-align:center;justify-items:center}
    footer a{margin:0}
}