:root{
  --blue:#8A6A15; --blue-d:#6E5410; --cyan:#C8992F; --ink:#2B2F35;
  --slate:#4A4E55; --muted:#6E6C6A; --line:#E9E4DA; --bg:#FBF6EC;
  --white:#FFFFFF; --amber:#C8992F;
  --grad:linear-gradient(135deg,#2B2F35 0%,#464D57 100%);
  --grad-gold:linear-gradient(135deg,#A9791A 0%,#E7C877 55%,#B8862B 100%);
  --grad-soft:linear-gradient(135deg,#FCF7EE 0%,#F5EAD3 100%);
  --shadow:0 10px 30px -12px rgba(43,47,53,.18);
  --shadow-lg:0 26px 56px -20px rgba(43,47,53,.28);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Be Vietnam Pro',sans-serif;line-height:1.2;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* NOTE: .block must come BEFORE .en — same specificity, so the later rule wins.
   With .block after .en, every `class="en block"` stayed visible in Vietnamese mode. */
.block{display:block}
.en{display:none}
[data-lang="en"] .vi{display:none}
[data-lang="en"] .en{display:inline}
[data-lang="en"] .en.block{display:block}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Be Vietnam Pro';font-weight:800;font-size:20px}
.brand svg{height:40px;width:auto}
.brand b{color:var(--blue)}
.brand small{display:block;font-size:9px;font-weight:600;letter-spacing:2.5px;color:var(--muted)}
.menu{display:flex;gap:24px;align-items:center}
.menu>a,.has-drop>a{font-size:14.5px;font-weight:500;color:var(--slate);transition:color .2s;cursor:pointer}
.menu>a:hover,.has-drop>a:hover,.menu a.active{color:var(--blue)}
/* dropdown */
.has-drop{position:relative}
.has-drop>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:7px;vertical-align:middle;opacity:.65;transition:transform .2s}
.has-drop:hover>a::after{transform:rotate(45deg) translate(1px,1px)}
.drop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;min-width:250px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.18s;z-index:60}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.drop a{display:flex;flex-direction:column;padding:9px 14px;border-radius:10px;font-size:14px;color:var(--ink);font-weight:600}
.drop a small{font-weight:500;font-size:12px;color:var(--muted)}
.drop a:hover{background:var(--grad-soft);color:var(--blue)}
.actions{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:13px;font-weight:600}
.lang button{border:0;background:transparent;padding:7px 13px;cursor:pointer;color:var(--muted)}
.lang button.on{background:var(--grad);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;cursor:pointer;border:0;transition:transform .18s,box-shadow .18s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -8px rgba(43,47,53,.34)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(43,47,53,.4)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:76px 0 90px}
.hero:before{content:"";position:absolute;top:-140px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(200,153,47,.26),transparent 65%);border-radius:50%}
.hero:after{content:"";position:absolute;bottom:-160px;left:-120px;width:460px;height:460px;background:radial-gradient(circle,rgba(43,47,53,.12),transparent 65%);border-radius:50%}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--blue);font-weight:600;font-size:13px;padding:7px 15px;border-radius:999px;box-shadow:var(--shadow)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(199,154,34,.24)}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;margin:22px 0 18px}
.grad-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:linear-gradient(135deg,#A9791A 0%,#E7C877 45%,#B8862B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--slate);max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-mini{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap}
.hero-mini div b{font-family:'Be Vietnam Pro';font-size:26px;color:var(--ink);font-weight:800}
.hero-mini div span{font-size:13px;color:var(--muted)}

/* Hero visual card */
.hero-card{position:relative;background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);padding:26px;border:1px solid var(--line)}
.hero-card .head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.hero-card .avatar{width:46px;height:46px;border-radius:13px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700;font-family:'Be Vietnam Pro';box-shadow:0 0 0 3px rgba(200,153,47,.18)}
.bar-wrap{display:flex;align-items:center;gap:12px;margin:11px 0}
.bar{height:9px;border-radius:6px;background:#F1EADB;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--grad-gold);border-radius:6px}
.pct{font-family:'Be Vietnam Pro';font-weight:700;font-size:12.5px;color:var(--blue);min-width:38px;text-align:right}
.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mini-cards div{background:var(--bg);border:1px solid var(--line);border-top:3px solid #C8992F;border-radius:14px;padding:16px 14px;position:relative}
.mini-cards .mc-ico{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center}
.mini-cards b{font-family:'Be Vietnam Pro';font-size:22px;display:block}
.mini-cards span{font-size:12px;color:var(--muted)}
.float-badge{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
.fb1{top:-18px;right:24px}
.fb2{bottom:-18px;left:-18px}
.ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}

/* ---------- Page hero (sub pages) ---------- */
/* Light by default — same ivory+gold palette as the home hero, so every page opens
   in the brand colours. Also fixes a real problem: .btn-primary IS var(--grad), so on
   the old dark hero the main CTA was nearly invisible against its own background.
   Add class "dark" to keep the graphite variant (used by 404.html, whose wordmark and
   slogan are hard-coded white/gold). */
.page-hero{background:var(--grad-soft);color:var(--ink);padding:60px 0 54px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;top:-120px;right:-100px;width:420px;height:420px;background:radial-gradient(circle,rgba(199,154,34,.24),transparent 65%);border-radius:50%}
.page-hero:after{content:"";position:absolute;bottom:-140px;left:-120px;width:380px;height:380px;background:radial-gradient(circle,rgba(43,47,53,.10),transparent 65%);border-radius:50%}
.page-hero .wrap{position:relative}
/* --blue-d (not --blue): on the cream hero --blue is 4.43:1, just under the 4.5 AA floor */
.crumb{font-size:12.5px;color:var(--blue-d);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.crumb a{color:var(--blue-d);opacity:.92}
.crumb a:hover{opacity:1}
.page-hero h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;max-width:820px}
.page-hero .ph-sub{color:var(--slate);font-size:17px;max-width:660px;margin-top:16px}
/* btn-light is built for dark backgrounds — on the light hero it must read as a ghost button */
.page-hero .btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.page-hero .btn-light:hover{background:#fff;border-color:var(--blue);color:var(--blue)}
/* the stock .gold-text gradient peaks at #E7C877 = 1.5:1 on cream — deepen it on the light hero
   (404's giant numeral). Every stop here clears 3:1, the WCAG floor for large text. */
/* background-image, NOT the `background` shorthand — the shorthand would reset background-clip
   back to border-box and paint a solid gold rectangle instead of clipping to the glyphs. */
.page-hero:not(.dark) .gold-text{background-image:linear-gradient(135deg,#8A6A15 0%,#B8862B 45%,#96721A 100%)}
/* --- dark variant (available; currently unused — see CLAUDE.md) --- */
.page-hero.dark{background:var(--grad);color:#fff}
.page-hero.dark:before{background:radial-gradient(circle,rgba(199,154,34,.20),transparent 65%)}
.page-hero.dark:after{background:radial-gradient(circle,rgba(255,255,255,.05),transparent 65%)}
.page-hero.dark .crumb,.page-hero.dark .crumb a{color:#D9BE77}
.page-hero.dark .ph-sub{color:#D8D1C5}
.page-hero.dark .btn-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.page-hero.dark .btn-light:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.28);color:#fff}
/* same trick .cta already uses: an inverted primary so the CTA doesn't vanish into var(--grad) */
.page-hero.dark .btn-primary{background:#fff;color:var(--blue);box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.page-hero .ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- Sections ---------- */
section{padding:88px 0;scroll-margin-top:80px}
footer{scroll-margin-top:80px}
.tag{display:inline-block;color:var(--blue);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.sec-title{font-size:clamp(26px,3.5vw,38px);font-weight:800;max-width:720px}
.sec-sub{color:var(--slate);font-size:17px;max-width:640px;margin-top:14px}
.center{text-align:center;margin:0 auto}
.center .sec-title,.center .sec-sub{margin-left:auto;margin-right:auto}
.prose p{color:var(--slate);font-size:16px;margin-bottom:14px;max-width:760px}
.link-more{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:700;font-size:15px;margin-top:18px}
.link-more:hover{gap:11px}

/* Stats strip */
.stats{background:var(--ink);color:#fff;padding:52px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats b{font-family:'Be Vietnam Pro';font-size:clamp(30px,4vw,44px);font-weight:800;display:block;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:#A9A299;font-size:14px}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-visual{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--grad);min-height:320px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg)}
.about-visual .quote{padding:44px;text-align:center;position:relative}
.about-visual .quote .qmark{display:block;font-size:68px;font-family:Georgia,serif;line-height:.5;opacity:.28;margin-bottom:8px;color:#E7C877}
.checklist{list-style:none;margin-top:22px;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.check{flex:0 0 24px;height:24px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;color:var(--blue);margin-top:2px}

/* Vision / Mission */
.vm{background:var(--bg)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.vm-card{background:#fff;border-radius:var(--radius);padding:38px;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.vm-card:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:var(--grad)}
.vm-card .ico{width:56px;height:56px;border-radius:16px;background:var(--grad);margin-bottom:18px}
.vm-card h3{font-size:23px;margin-bottom:10px}
.vm-card p{color:var(--slate)}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.svc{border:1px solid var(--line);border-radius:var(--radius);padding:34px;transition:transform .2s,box-shadow .2s,border-color .2s;background:#fff;position:relative;overflow:hidden;scroll-margin-top:90px}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc .ico{width:60px;height:60px;border-radius:16px;background:var(--grad-soft);color:var(--blue);margin-bottom:20px}
.svc:hover .ico{background:var(--grad);color:#fff}
.svc h3{font-size:22px;margin-bottom:10px}
.svc p{color:var(--slate);font-size:15.5px}
.svc ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.svc ul li{font-size:14px;color:var(--muted);padding-left:20px;position:relative}
.svc ul li:before{content:"→";position:absolute;left:0;color:var(--cyan);font-weight:700}
.svc .num{position:absolute;top:22px;right:26px;font-family:'Be Vietnam Pro';font-weight:800;font-size:44px;color:var(--bg)}

/* Process */
.proc{background:linear-gradient(180deg,#fff, var(--bg))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.step{text-align:center;position:relative}
.step .circle{width:70px;height:70px;border-radius:20px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 18px;font-family:'Be Vietnam Pro';font-weight:800;font-size:24px;color:var(--blue);box-shadow:var(--shadow);position:relative;z-index:2}
.step h4{font-size:18px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted);padding:0 8px}
.steps:before{content:"";position:absolute;height:2px;background:var(--line);width:75%;left:12.5%;margin-top:35px;z-index:0}

/* Why us */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.why{padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.why .ico{width:50px;height:50px;border-radius:14px;background:var(--grad-soft);color:var(--blue);margin-bottom:16px}
.why h4{font-size:18px;margin-bottom:8px}
.why p{font-size:14.5px;color:var(--slate)}

/* Tech */
.tech{background:var(--ink);color:#fff}
.tech .sec-title,.tech .sec-sub{color:#fff}
.tech .sec-sub{color:#A9A299}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;justify-content:center}
.chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:11px 20px;border-radius:999px;font-size:14px;font-weight:500;color:#ECE6DA;transition:all .2s}
.chip:hover{background:var(--grad);border-color:transparent;transform:translateY(-3px)}

/* Portfolio / cards */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.port{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s}
.port:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.port .cover{aspect-ratio:16/10;display:grid;place-items:center;color:#fff;font-family:'Be Vietnam Pro';font-weight:800;font-size:22px;padding:20px;text-align:center}
.port .body{padding:22px}
/* direct child only — otherwise this hits every bilingual <span> inside h4/p and
   uppercases the whole card. --blue (not --cyan) for AA contrast on white. */
.port .body>span{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:1px;text-transform:uppercase}
.port .body h4{font-size:18px;margin:6px 0 8px}
.port .body p{font-size:14px;color:var(--muted)}
.port .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill-sm{font-size:11.5px;font-weight:600;color:var(--slate);background:var(--bg);border:1px solid var(--line);padding:4px 11px;border-radius:999px}
.pill-sm.accent{color:var(--blue);background:var(--grad-soft);border-color:transparent}
.nda-note{display:flex;gap:20px;align-items:flex-start;margin-top:28px;padding:28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--grad-soft);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.nda-note:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:var(--grad-gold)}
.nda-ico{flex:0 0 60px;height:60px;border-radius:16px;background:var(--ink);color:#E7C877;display:grid;place-items:center}
.nda-note h4{font-size:19px;margin-bottom:8px}
.nda-note p{color:var(--slate);font-size:15px;max-width:840px}
@media(max-width:560px){.nda-note{flex-direction:column;gap:14px}}
.edc{display:grid;grid-template-columns:.82fr 1.18fr;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff;margin-bottom:34px}
.edc-side{background:var(--grad);color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.edc-side .badge{align-self:flex-start;background:var(--grad-gold);color:#3A2E0C;font-weight:800;font-size:11px;letter-spacing:.5px;padding:6px 13px;border-radius:999px;text-transform:uppercase}
.edc-side h3{font-family:'Be Vietnam Pro';font-size:34px;font-weight:800;line-height:1.05}
.edc-side .st{opacity:.92;font-size:15px}
.edc-side .sl{color:#E7C877;font-style:italic;font-weight:600;font-size:15px;margin-top:4px}
.edc-main{padding:38px 42px}
.edc-main>p{color:var(--slate);font-size:15.5px}
.edc-parts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.edc-part{display:flex;gap:12px}
.edc-part .ic{flex:0 0 42px;height:42px;border-radius:11px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center}
.edc-part b{display:block;font-size:14.5px;font-family:'Be Vietnam Pro'}
.edc-part .d{display:block;font-size:13px;color:var(--muted)}
@media(max-width:900px){.edc{grid-template-columns:1fr}.edc-parts{grid-template-columns:1fr}}

/* ---------- FAQ ----------
   Used by the contact page. The answers there are also the plain-text fallback for the compact
   phone spellings (see the comment above the block in contact.html), so `.faq-alt` exists to carry
   those extra spellings as ORDINARY text while staying visually subordinate — one prominent format
   per number, the alternates as a quiet caption. Never restyle `.faq-alt` to display:none or move
   its content into an attribute; that turns an indexable string into an invisible one. */
.faq{max-width:820px;margin:44px auto 0}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:26px 30px;margin-bottom:16px;transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:#DCD3C2;box-shadow:var(--shadow-lg)}
.faq-item h4{font-size:17.5px;font-weight:700;margin-bottom:10px;display:flex;gap:13px;align-items:flex-start;line-height:1.5}
.faq-item h4 .q{flex:0 0 27px;height:27px;border-radius:9px;background:var(--grad-soft);color:var(--blue);font-family:'Be Vietnam Pro';font-weight:800;font-size:13px;display:grid;place-items:center;margin-top:2px}
.faq-body{padding-left:40px}
.faq-item p{color:var(--slate);font-size:15.5px}
.faq-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.faq-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s,background .2s}
.faq-chip:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.faq-chip svg{flex:0 0 15px;color:var(--blue)}
.faq-chip b{font-family:'Be Vietnam Pro';font-weight:700}
.faq-alt{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.7}
.faq-alt b{color:var(--slate);font-weight:600}
@media(max-width:640px){.faq-item{padding:22px 20px}.faq-body{padding-left:0}}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.stars{color:var(--amber);letter-spacing:3px;margin-bottom:14px}
.qcard p{color:var(--slate);font-size:15px;font-style:italic}
.qcard .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.qcard .who .av{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.qcard .who b{display:block;font-size:15px}
.qcard .who small{color:var(--muted)}

/* CTA */
.cta{background:var(--grad);color:#fff;border-radius:28px;padding:64px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 40%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.12),transparent 40%)}
.cta h2{font-size:clamp(26px,4vw,40px);position:relative;margin-bottom:14px}
.cta p{position:relative;opacity:.95;max-width:560px;margin:0 auto 30px;font-size:17px}
.cta .btn-primary{background:#fff;color:var(--blue)}
.cta .btn{position:relative;z-index:1}
.cta-contacts{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
.cta-pill{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 18px;text-align:left;transition:transform .18s,box-shadow .18s}
.cta-pill:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(0,0,0,.45)}
.cta-pill .ci{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--grad-gold);color:#3A2E0C;display:grid;place-items:center}
.cta-pill small{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.cta-pill b{display:block;font-size:15.5px;color:var(--ink);font-family:'Be Vietnam Pro'}
.cta-wrap{padding:40px 0 100px}
@media(max-width:560px){.cta-contacts{flex-direction:column}.cta-pill{width:100%}}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:block}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.contact-card .ic{width:52px;height:52px;border-radius:14px;background:var(--grad-gold);color:#3A2E0C;display:grid;place-items:center;margin-bottom:18px}
.contact-card small{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.contact-card b{display:block;font-size:19px;font-family:'Be Vietnam Pro';margin-top:4px}
.contact-card p{font-size:14px;color:var(--slate);margin-top:6px}
.map-wrap{margin-top:44px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.map-wrap iframe{display:block;width:100%;height:380px;border:0}

/* App Store button */
.appstore{display:inline-flex;align-items:center;gap:9px;margin-top:16px;background:var(--ink);color:#fff;padding:9px 16px;border-radius:11px;font-size:13px;font-weight:600;transition:transform .18s,box-shadow .18s}
.appstore:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}
.appstore small{font-size:9px;display:block;opacity:.7;font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.5px}
.appstore b{font-size:14px;display:block;font-family:'Be Vietnam Pro';line-height:1.15}

/* Founder message */
.founder-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:center}
.founder-photo{position:relative;max-width:400px}
.founder-photo img{width:100%;height:auto;aspect-ratio:880/1100;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-lg);display:block;position:relative;z-index:1}
.founder-photo:before{content:"";position:absolute;right:-16px;bottom:-16px;width:70%;height:70%;border:3px solid var(--cyan);border-radius:20px;z-index:0;opacity:.6}
.founder-badge{position:absolute;left:16px;bottom:16px;z-index:2;background:var(--grad);color:#fff;padding:10px 18px;border-radius:14px;box-shadow:var(--shadow);font-size:13px;line-height:1.25}
.founder-badge b{display:block;font-family:'Be Vietnam Pro';font-size:15px}
.founder-badge span{color:#E7C877;font-weight:600}
.founder-msg .qmark{display:block;font-family:Georgia,serif;font-size:72px;line-height:.35;color:var(--cyan);opacity:.55;margin-bottom:14px}
.founder-msg p{font-size:16.5px;color:var(--slate);margin-bottom:14px;max-width:660px}
.founder-msg p.lead-q{font-size:20px;color:var(--ink);font-weight:600;font-family:'Be Vietnam Pro';line-height:1.5}
.founder-sign{margin-top:28px;display:flex;align-items:center;gap:16px}
.founder-sign .nm b{font-family:'Be Vietnam Pro';font-size:19px;display:block}
.founder-sign .nm span{color:var(--muted);font-size:14px}
.founder-sign .seal{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:var(--grad-gold);color:#3A2E0C;display:grid;place-items:center;font-family:'Be Vietnam Pro';font-weight:800;font-size:18px;box-shadow:var(--shadow)}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr;gap:36px}.founder-photo{max-width:320px;margin:0 auto}}

/* ---- Our edge / motto ---- */
.edge-motto{background:var(--grad);color:#fff;border-radius:var(--radius);padding:40px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.edge-motto:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(200,153,47,.16),transparent 42%),radial-gradient(circle at 85% 85%,rgba(200,153,47,.12),transparent 42%)}
.edge-m{position:relative;text-align:center;padding:0 10px}
.edge-m + .edge-m{border-left:1px solid rgba(255,255,255,.1)}
.edge-m .ic{width:54px;height:54px;border-radius:15px;background:var(--grad-gold);color:#2B2F35;display:grid;place-items:center;margin:0 auto 16px}
.edge-m b{display:block;font-family:'Be Vietnam Pro';font-size:20px;margin-bottom:5px}
.edge-m span{color:#D8D1C5;font-size:13.5px}
@media(max-width:760px){.edge-motto{grid-template-columns:1fr;gap:26px;padding:34px 24px}.edge-m + .edge-m{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:26px}}

/* Footer */
footer{background:var(--ink);color:#D8D1C5;padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:36px}
.foot-grid>div:first-child{min-width:0}
footer .brand{color:#fff}
footer .brand small{color:#8C8578}
footer p{font-size:14.5px;color:#A9A299;margin-top:16px;max-width:330px}
footer h5{color:#fff;font-family:'Be Vietnam Pro';font-size:15px;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer ul li{font-size:14px;color:#A9A299}
footer a:hover{color:#fff}
.contact-line{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-bottom:12px;color:#D8D1C5}
/* ---------- .pn — REMOVED 2026-09-18, do not bring it back ----------
   `.pn` marked up a phone number with no whitespace between the digit groups and
   let CSS margin draw the gaps, betting that a crawler would read the text as one
   compact token while a reader saw "0944 160 886". The bet lost.

   The evidence: every page carried `.pn`, yet Googling "0944160886" returned only
   /contact — the single page that also spells the number out as ordinary text in
   the FAQ. Meanwhile "0944 160 886" returned every page. So Google tokenizes at
   the inline element boundary: the markup produced three tokens, not one, which
   is exactly the bug `.pn` existed to fix.

   The numbers are now plain contiguous text. Do not re-split them across tags for
   any reason, cosmetic or otherwise. */
.contact-line svg{flex:0 0 18px;margin-top:2px;color:var(--cyan)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .2s}
.socials a:hover{background:var(--grad)}
.socials a svg{fill:#C8C1B4}
.socials a:hover svg{fill:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#8C8578}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px 18px;gap:2px;box-shadow:var(--shadow-lg)}
  header.nav-open .menu{display:flex}
  .menu>a,.has-drop>a{padding:12px 2px;font-size:15px}
  .has-drop .drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:2px 0 8px 14px;min-width:0;background:transparent}
  .has-drop .drop a{padding:8px 4px}
  .has-drop>a::after{float:right;margin-top:8px}
  .burger{display:block}
  .hero-grid,.about-grid,.vm-grid,.svc-grid,.stats-grid,.steps,.why-grid,.port-grid,.quotes,.foot-grid,.contact-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:32px}
  .steps:before{display:none}
  .hero-card{margin-top:10px}
  section{padding:64px 0}
  .cta{padding:44px 24px}
}
@media(max-width:560px){.hero-mini{gap:20px}.stats-grid{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}}

/* ---- Mobile header: keep language switcher in the bar, move CTA into the menu ---- */
header .brand span{white-space:nowrap}
.menu-actions{display:none}
@media(max-width:900px){
  .actions .btn-primary{display:none}
  .actions{gap:10px}
  .lang{font-size:12px}
  .lang button{padding:6px 11px}
  .menu-actions{display:flex;flex-direction:column;gap:14px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
  .menu-actions .btn{justify-content:center;width:100%}
}

/* ---------- Polish & accessibility ---------- */
header{transition:box-shadow .25s ease, background .25s ease}
header.scrolled{box-shadow:0 8px 26px -16px rgba(43,47,53,.38)}
/* animated nav underline (desktop) */
@media(min-width:901px){
  .menu>a,.menu>.has-drop>a{position:relative}
  .menu>a::before,.menu>.has-drop>a::before{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grad-gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .menu>a:hover::before,.menu>.has-drop:hover>a::before,.menu>a.active::before,.menu>.has-drop>a.active::before{transform:scaleX(1)}
}
/* burger -> X */
header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .burger span:nth-child(2){opacity:0}
header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* scroll-to-top */
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background .2s,color .2s;z-index:60;border:0;cursor:pointer}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--grad-gold);color:#2B2F35}
/* keyboard focus */
a:focus-visible,button:focus-visible,.btn:focus-visible,.contact-card:focus-visible{outline:3px solid rgba(200,153,47,.65);outline-offset:2px;border-radius:8px}
/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .to-top,.menu>a::before,.menu>.has-drop>a::before,.port,.svc,.contact-card,.cta-pill{transition:none !important}
}