:root { --ink:#0F2E36; --soft:#52666C; --paper:#F6FAF9; --card:#FFFFFF; --teal:#1FA0B2; --green:#28BA8B; --gold:#BFEBDC; --line:#DDE9E7; --grad:linear-gradient(135deg,#1FA0B2,#28BA8B); }
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--paper); color:var(--ink); font-family:Inter,system-ui,sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden }
a { color:inherit }
img { max-width:100%; display:block }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 24px }
.serif { font-family:Nunito,system-ui,sans-serif; letter-spacing:-.02em }

/* Header */
header.top { position:sticky; top:0; z-index:20; background:rgba(246,250,249,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px }
.logo { font-family:Nunito,system-ui,sans-serif; font-weight:900; font-size:25px; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--green) }
.logo img { width:38px; height:38px }
.logo b { font-weight:900; color:var(--teal) }
nav.main { display:flex; align-items:center; gap:26px; font-size:15px; font-weight:500 }
nav.main a { text-decoration:none; color:var(--soft) }
nav.main a:hover, nav.main a.on { color:var(--ink) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; border:0; cursor:pointer; transition:transform .15s, box-shadow .15s }
.btn:hover { transform:translateY(-1px) }
.btn.dark { background:var(--teal); color:#fff !important; box-shadow:0 6px 18px rgba(31,160,178,.28) }
.btn.dark:hover { background:#1a8d9d }
.btn.gold { background:#fff; color:var(--teal) }
.btn.line { border:1.5px solid var(--teal); color:var(--teal) }
.menu-btn { display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--ink) }
@media (max-width:860px) {
  nav.main { display:none; position:absolute; top:68px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:16px 24px 24px; border-bottom:1px solid var(--line); gap:16px }
  nav.main.open { display:flex }
  .menu-btn { display:block }
}

/* Sections */
section { padding:84px 0 }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:14px }
h1 { font-family:Nunito,system-ui,sans-serif; font-weight:900; font-size:clamp(38px,6vw,68px); line-height:1.04; letter-spacing:-.025em }
h1 em, h2 em { font-style:normal; background:linear-gradient(transparent 62%, var(--gold) 62%) }
h2 { font-family:Nunito,system-ui,sans-serif; font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:-.03em }
h3 { font-size:19px; font-weight:600; letter-spacing:-.01em }
.lead { font-size:18px; color:var(--soft); max-width:36em; margin-top:18px }
.muted { color:var(--soft) }
.center { text-align:center }
.center .lead { margin-left:auto; margin-right:auto }

/* Hero */
.hero { padding:72px 0 84px }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center }
.hero .ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.hero-card { position:relative; border-radius:32px; background:var(--grad); color:#fff; padding:32px; overflow:hidden; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end }
.hero-card .ring { position:absolute; border-radius:50% }
.hero-card .r1 { width:360px; height:360px; top:-130px; right:-120px; border:1.5px solid rgba(255,255,255,.45) }
.hero-card .r2 { width:230px; height:230px; top:-65px; right:-55px; border:1.5px solid rgba(255,255,255,.18) }
.hero-card .hero-mark { position:absolute; width:96px; height:96px; top:4px; right:16px }
.hero-card .r3 { width:120px; height:120px; top:-8px; right:4px; background:rgba(255,255,255,.9) }
.hero-card .langs { display:flex; flex-wrap:wrap; gap:8px; position:relative; margin-top:18px }
.hero-card .langs span { font-size:14px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3) }
.hero-card h3 { font-family:Nunito,system-ui,sans-serif; font-size:28px; line-height:1.15; position:relative; font-weight:700 }
.ticks { list-style:none; margin-top:26px; display:grid; gap:10px }
.ticks li { padding-left:30px; position:relative }
.ticks li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; display:grid; place-items:center; margin-top:3px }

/* Cards */
.grid { display:grid; gap:20px }
.g3 { grid-template-columns:repeat(3,1fr) }
.g4 { grid-template-columns:repeat(4,1fr) }
.g2 { grid-template-columns:repeat(2,1fr) }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px }
.card .num { font-family:Nunito,system-ui,sans-serif; font-size:40px; font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1 }
.card p { color:var(--soft); margin-top:8px; font-size:15px }
.flag { font-size:30px; line-height:1 }
.band { background:var(--grad); color:#fff; border-radius:32px; padding:56px 48px }
.band .lead { color:rgba(255,255,255,.9) }

/* Pricing */
.price { font-family:Nunito,system-ui,sans-serif; font-size:38px; font-weight:700; margin-top:14px; line-height:1 }
.price small { font-family:Inter,sans-serif; font-size:15px; font-weight:500; color:var(--soft) }
.card.featured { border:2px solid var(--teal); position:relative }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--grad); color:#fff }
.card ul { list-style:none; margin-top:18px; display:grid; gap:8px; font-size:15px }
.card ul li { padding-left:22px; position:relative }
.card ul li::before { content:"•"; position:absolute; left:6px; color:var(--green); font-weight:800 }
.card .btn { margin-top:22px; width:100% }
table.levels { width:100%; border-collapse:collapse; margin-top:28px; background:var(--card); border-radius:18px; overflow:hidden; border:1px solid var(--line) }
table.levels th, table.levels td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:15px }
table.levels th { background:#E8F5F2; font-weight:600 }
table.levels tr:last-child td { border-bottom:0 }
.table-wrap { overflow-x:auto }

/* FAQ */
details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin-top:12px }
details summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px }
details summary::after { content:"+"; font-size:22px; line-height:1; color:var(--soft) }
details[open] summary::after { content:"–" }
details p { margin-top:10px; color:var(--soft) }

/* Legal pages */
.legal { max-width:780px }
.legal h1 { font-size:clamp(34px,5vw,50px) }
.legal .updated { color:var(--soft); margin-top:10px; font-size:14px }
.legal h2 { font-size:24px; margin-top:40px; margin-bottom:10px }
.legal p, .legal li { color:#39345a; margin-top:10px }
.legal ul { padding-left:22px }
.legal table { width:100%; border-collapse:collapse; margin-top:14px; font-size:15px }
.legal th, .legal td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top }
.legal th { background:#E8F5F2 }

/* Contact */
.contact-list { display:grid; gap:14px; margin-top:24px }
.contact-list a { text-decoration:none }
form.enquiry { display:grid; gap:14px }
form.enquiry label { font-size:14px; font-weight:600; display:grid; gap:6px }
form.enquiry input, form.enquiry select, form.enquiry textarea { font:inherit; font-weight:400; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); width:100% }
form.enquiry textarea { min-height:110px; resize:vertical }

/* Footer */
footer.site { border-top:1px solid var(--line); padding:56px 0 32px; margin-top:40px; font-size:15px }
footer.site .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px }
footer.site h4 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin-bottom:12px }
footer.site ul { list-style:none; display:grid; gap:8px }
footer.site a { text-decoration:none; color:var(--ink) }
footer.site a:hover { text-decoration:underline }
footer.site .base { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--soft); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px }
.pay-note { font-size:13px; color:var(--soft); margin-top:12px }

@media (max-width:960px) { .g4 { grid-template-columns:repeat(2,1fr) } footer.site .cols { grid-template-columns:1fr 1fr } }
@media (max-width:820px) {
  section { padding:60px 0 }
  .hero { padding:40px 0 60px }
  .hero-grid, .g3, .g2 { grid-template-columns:1fr }
  .hero-card { min-height:300px }
  .band { padding:40px 24px; border-radius:24px }
}
@media (max-width:480px) { .wrap { padding:0 16px } .g4 { grid-template-columns:1fr } footer.site .cols { grid-template-columns:1fr } .hero .ctas .btn { width:100% } }