:root {
  --bg:#F7F9FC;         /* page background */
  --fg:#131820;         /* primary text */
  --muted:#6B778C;      /* secondary text */
  --accent:#2E90FA;     /* brand accent (blue) */
  --accent-2:#10B981;   /* tertiary accent (teal) */
  --card:#FFFFFF;       /* surfaces */
  --border:#E6EBF2;     /* subtle borders */
  --shadow: 0 10px 30px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';color:var(--fg);background:var(--bg)}
a{color:var(--fg);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Header / Nav */
header{position:sticky;top:0;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;gap:28px;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 210deg, var(--accent), #7dd3fc, #60a5fa, #34d399)}
.brand strong{font-weight:700;letter-spacing:.2px}

.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{color:#2C3440;opacity:.86}
.navlinks a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#F6FAFF);box-shadow:var(--shadow);color:#0B192F;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#3BA9FF,#2E90FA);color:#fff;border-color:#2E90FA}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff}
.active-link{border-bottom:2px solid var(--accent)}

.hero{padding:92px 0 60px;border-bottom:1px solid var(--border);background:radial-gradient(1200px 600px at 15% -10%, rgba(46,144,250,.15), transparent)}
.hero h1{font-size:52px;line-height:1.04;margin:0 0 18px;letter-spacing:.2px}
.hero p{font-size:18px;color:var(--muted);max-width:760px}

/* Sections */
section{padding:76px 0;border-bottom:1px solid var(--border)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);padding:22px;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ph{aspect-ratio:1/1;border-radius:14px;background:linear-gradient(120deg,#eef4ff,#f7fbff);border:1px dashed #cfe0f5}

.kv{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.step{display:flex;gap:12px;align-items:flex-start}
.step .num{min-width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);color:#1f2a37}

footer{padding:44px 0;color:var(--muted)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(9,18,28,.45);display:none;align-items:center;justify-content:center;z-index:50}
.modal{width:min(680px,92vw);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px rgba(9,18,28,.12)}
.modal header{position:relative;background:transparent;border:0}
.modal .head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal .body{padding:20px}
.modal .close{border:1px solid var(--border);background:#fff;border-radius:10px;color:#0B192F;padding:8px 12px;cursor:pointer}
label{display:block;margin:10px 0 6px;font-weight:600}
input,textarea,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:#0B192F;box-shadow:inset 0 1px 0 rgba(16,24,40,.02)}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(46,144,250,.25);border-color:#B7D7FF}
textarea{min-height:140px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .actions{display:flex;gap:12px;justify-content:flex-end;padding:0 20px 20px}
.badge{font-size:12px;color:#7A869A}
.success{border-color:#10B981}
.error{border-color:#EF4444}
.notice{display:none;margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid #C6F6D5;background:#F0FFF4;color:#065F46}
.notice.show{display:block}

@media (max-width:1000px){
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .kv{grid-template-columns:1fr}
  .hero h1{font-size:38px}
}