:root{
  --grad-left:#00A6FF;
  --grad-mid:#00E5C7;
  --grad-right:#8A2BE2;
  --navy:#071029;
  --muted:#6b7280;
  --container:1180px;
  --radius:14px;
  --glass-bg: rgba(255,255,255,0.72);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--navy);
  margin:0;
  background:
    radial-gradient(1200px 400px at 10% 10%, rgba(0,229,255,0.04), transparent 6%),
    radial-gradient(800px 300px at 90% 80%, rgba(138,43,226,0.02), transparent 6%),
    #FBFDFF;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--container); margin:0 auto; padding:0 22px}
.center{text-align:center}
.muted{color:var(--muted)}

/* Header */
.site-header{padding:12px 0 6px; background:transparent; border-bottom:1px solid rgba(11,21,32,0.03)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-row{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.site-logo{height:72px;width:auto;display:block;filter:drop-shadow(0 10px 30px rgba(6,18,50,0.08))}
.brand-text{display:flex;flex-direction:column;margin-left:6px;gap:2px}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-0.02em}
.tagline-inline{font-size:15px;color:#000;font-weight:700;margin-top:2px}

/* Nav pills */
.nav-main{display:flex;gap:12px;align-items:center}
.nav-main a:not(.btn-outline){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:linear-gradient(90deg,var(--grad-left),var(--grad-mid),var(--grad-right));
  color:#fff !important;font-weight:800;text-decoration:none;border:0;
  box-shadow:0 10px 30px rgba(6,18,50,0.10);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}
.nav-main a:not(.btn-outline):hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(6,18,50,0.14);filter:saturate(1.05);opacity:.98}
.nav-main a.btn-outline{background:transparent;border:1px solid rgba(11,21,32,0.06);color:var(--navy);box-shadow:none}

/* Buttons */
.btn{padding:10px 18px;border-radius:12px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--grad-left),var(--grad-mid),var(--grad-right));color:#fff;transition:transform .12s,box-shadow .12s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 48px rgba(6,18,50,0.14)}
.btn-ghost{border:1px solid rgba(11,21,32,0.08);color:var(--navy);background:transparent}

/* About merged */
.about-merged{
  padding:56px 0 36px;
  background:
    radial-gradient(1000px 320px at 8% 12%, rgba(0,229,255,0.05), transparent 40%),
    radial-gradient(800px 260px at 92% 85%, rgba(138,43,226,0.03), transparent 45%),
    #FBFDFF;
}
.about-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.about-left h1{font-size:40px;line-height:1.05;margin:0 0 12px;font-weight:800}
.about-left .lead{font-size:17px;color:var(--muted);margin-bottom:14px}
.about-benefits{margin:12px 0 6px 0;list-style:none;padding-left:0}
.about-benefits li{margin:6px 0 0 0;padding-left:20px;position:relative}
.about-benefits li::before{content:'✔';position:absolute;left:0;top:0;color:var(--grad-left);font-weight:900}

/* OSWizard preview card */
.osw-card{width:100%;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 30px 80px rgba(9,18,32,0.06);padding:18px;border-radius:12px;border:1px solid rgba(11,21,32,0.04)}
.osw-card-header{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.osw-mascot{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--grad-left),var(--grad-mid));box-shadow:0 8px 24px rgba(10,40,80,0.08)}
.osw-title-main{font-weight:800;color:#06142a;font-size:16px}
.osw-title-sub{font-size:13px;color:var(--muted);margin-top:2px}
.osw-body{display:flex;gap:16px}
.osw-steps{width:42%;display:flex;flex-direction:column;gap:12px}
.osw-step{display:flex;align-items:center;gap:10px;color:#334155;font-weight:700}
.osw-step .dot{width:18px;height:18px;border-radius:5px;background:#eef6ff;border:2px solid rgba(11,21,32,0.03)}
.osw-step.active .dot{background:linear-gradient(90deg,var(--grad-left),var(--grad-right));box-shadow:0 8px 24px rgba(0,122,255,0.12)}
.osw-console{width:58%;background:#06142a;color:#e6f7ff;padding:12px;border-radius:8px;min-height:160px;font-family:monospace;font-size:13px;overflow:hidden}
.osw-pbar{height:12px;background:#efeff3;border-radius:8px;overflow:hidden}
.osw-pbar-fill{height:100%;background:linear-gradient(90deg,var(--grad-left),var(--grad-mid),var(--grad-right));width:0%;transition:width .4s linear}
.osw-status{font-size:13px;color:var(--muted);font-weight:700}

/* Features (8) */
.features-full{background:linear-gradient(180deg,#fbfdff,#f5f9ff);padding:46px 0}
.features-full h2{margin-bottom:22px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:stretch}
.feature{background:linear-gradient(180deg,#fff,#fbfdff);padding:18px;border-radius:12px;border:1px solid rgba(11,21,32,0.04);display:flex;gap:14px;align-items:flex-start;transition:transform .14s ease, box-shadow .14s ease}
.feature:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(6,18,50,0.06)}
.icon-wrap{min-width:68px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle at 30% 25%, rgba(0,229,255,0.10), transparent 30%),linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.6));box-shadow:0 12px 34px rgba(11,21,32,0.04);border:1px solid rgba(11,21,32,0.03);padding:12px}
.feat-icon{width:48px;height:48px}
.feature-body h3{margin:0 0 6px;font-size:16px;font-weight:800}
.feature-body p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}

/* Comparison */
.comparison{background:#ffffff;padding:50px 0}
.cmp-table{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid rgba(11,21,32,0.07);padding:12px 16px;text-align:center}
th{background:linear-gradient(90deg, rgba(0,166,255,0.08), rgba(138,43,226,0.06));font-weight:700}
.tick{color:var(--grad-left);font-weight:800}
.cross{color:#c4c4c4}

/* Pricing */
.pricing{padding:50px 0}
.pricing-head{margin-bottom:18px}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px;align-items:stretch}
.card-plan{padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(11,21,32,0.04);display:flex;flex-direction:column;gap:12px;min-height:340px;position:relative}
.card-plan .plan-header{
  position:relative;z-index:2;padding:12px 14px;margin:-18px -18px 12px -18px;
  border-top-left-radius:12px;border-top-right-radius:12px;
  background:linear-gradient(90deg,var(--grad-left),var(--grad-mid),var(--grad-right));color:#fff;
  box-shadow:0 10px 30px rgba(6,18,50,0.06);display:flex;align-items:center;justify-content:space-between
}
.card-plan .plan-header h3{margin:0;color:#fff;font-size:18px;font-weight:900;letter-spacing:-0.01em}
.card-plan .plan-header .kicker{margin:0;color:rgba(255,255,255,0.95);font-weight:700;font-size:13px}
.card-plan.featured .plan-header{box-shadow:0 20px 60px rgba(0,122,255,0.12);border-bottom:1px solid rgba(255,255,255,0.08)}
.plan-price{margin:8px 0 6px;display:flex;align-items:baseline;gap:8px}
.price-amount{font-size:28px;font-weight:900}
.price-unit{color:var(--muted);font-weight:700;font-size:14px}
.plan-features{list-style:none;padding:0;margin:8px 0 12px;color:var(--muted)}
.plan-features li{padding:6px 0;border-top:1px dashed rgba(11,21,32,0.02)}
.plan-cta-wrap .btn{width:100%;display:inline-block;padding:12px 16px;border-radius:10px;font-weight:900}
.card-plan.featured{border:1px solid rgba(0,166,255,0.12);box-shadow:0 20px 80px rgba(11,21,32,0.06);transform:translateY(-4px)}

/* Contact */
.contact{padding:50px 0}
.centered-form{max-width:980px;margin:12px auto 44px;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,252,255,0.98));padding:26px;border-radius:16px;border:1px solid rgba(11,21,32,0.04);box-shadow:0 12px 30px rgba(6,18,50,0.06)}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.fg{position:relative;width:100%}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:18px 14px 14px 14px;border-radius:12px;border:1px solid rgba(11,21,32,0.06);background:linear-gradient(180deg,#fff,#fbfdff);font-size:15px;color:var(--navy);transition:box-shadow .14s,border-color .14s,transform .06s;outline:none}
.contact-form textarea{min-height:160px;padding-top:26px;line-height:1.45}
.fg label{position:absolute;left:16px;top:16px;font-size:14px;color:rgba(11,21,32,0.45);font-weight:700;transition:transform .14s cubic-bezier(.2,.9,.3,1),font-size .12s,color .12s;pointer-events:none;padding:0 6px}
.fg.filled label,.fg.focused label{transform:translateY(-10px) scale(.88);color:var(--navy);font-size:12px}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(0,166,255,0.42);box-shadow:0 10px 30px rgba(0,166,255,0.08);transform:translateY(-1px)}
.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.form-success{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;background:linear-gradient(90deg,rgba(0,230,187,0.08),rgba(138,43,226,0.04));color:var(--navy);font-weight:700}

/* Modal */
.osw-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1400}
.osw-modal.open{display:flex}
.osw-modal-backdrop{position:absolute;inset:0;background:rgba(6,18,50,0.6);backdrop-filter:blur(3px)}
.osw-modal-panel{position:relative;width:min(1100px,96%);max-height:90vh;overflow:hidden;margin:auto;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 30px 80px rgba(6,18,50,0.6);padding:16px;display:flex;flex-direction:column;gap:10px}
.osw-close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:28px;color:var(--navy);cursor:pointer}

/* Links (global underline animation kept subtle) */
a{color:var(--grad-left);text-decoration:none;position:relative}
a::after{content:'';display:block;height:2px;width:0;background:var(--grad-left);transition:width .18s}
a:hover::after{width:100%}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(11,21,32,0.03);color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:1100px){
  .about-hero-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .features-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .nav-main a:not(.btn-outline){padding:8px 10px;font-size:14px}
  .card-plan .plan-header{margin:-14px -14px 12px -14px;padding:10px 12px}
}