/* ==========================================
   GAFIVAL — H5 Stylesheet
   Mobile-first
   ========================================== */

:root{
  --ink:      #0F1A16;
  --ink-2:    #14221D;
  --ink-3:    #1A2C25;
  --steel:    #254036;
  --gold:     #C9A227;
  --gold-lt:  #E8CE7A;
  --bronze:   #9C7C1A;
  --azure:    #4E9E7E;
  --paper:    #FFFFFF;
  --cream:    #F4F6F2;
  --text:     #222C27;
  --muted:    #64726B;
  --line:     rgba(15,26,22,.12);
  --line-2:   rgba(201,162,39,.30);
  --radius:   16px;
  --shadow:   0 10px 34px -14px rgba(15,26,22,.30);
  --shadow-lg:0 24px 60px -22px rgba(15,26,22,.46);
  --wrap:     1140px;
  --ease:     cubic-bezier(.22,.68,.36,1);
  --f-disp:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-body:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--f-body); font-size:16px; line-height:1.7;
  color:var(--text); background:var(--cream); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; line-height:1.2; font-weight:600; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-family:var(--f-body); font-size:15px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:transform .28s var(--ease), background .28s var(--ease),
             box-shadow .28s var(--ease), color .28s var(--ease); text-align:center;
}
.btn:active{ transform:scale(.97); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:#1A1403; box-shadow:0 8px 24px -10px rgba(201,162,39,.80);
}
.btn-gold:hover{ box-shadow:0 14px 32px -10px rgba(201,162,39,.92); transform:translateY(-2px); }
.btn-ghost{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:rgba(15,26,22,.62); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{ background:rgba(15,26,22,.96); box-shadow:0 8px 30px -14px rgba(0,0,0,.6); }
.header-inner{
  max-width:var(--wrap); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:11px; color:var(--gold-lt); }
.brand-mark{ display:block; flex:0 0 auto; }
.brand-text strong{
  display:block; font-family:var(--f-disp); font-size:21px; font-weight:600;
  letter-spacing:.14em; color:#fff; line-height:1.15;
}
.brand-text em{
  display:block; font-style:normal; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:2px;
}
.nav-desktop{ display:none; gap:28px; align-items:center; }
.nav-desktop a{
  font-size:14px; font-weight:500; color:rgba(255,255,255,.82); position:relative; padding:4px 0;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-desktop a:hover{ color:#fff; }
.nav-desktop a:hover::after{ width:100%; }

.menu-toggle{
  width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:12px;
  background:rgba(255,255,255,.05); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.menu-toggle span{
  display:block; width:17px; height:1.6px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.mobile-menu{
  display:grid; gap:2px; max-height:0; overflow:hidden;
  padding:0 20px; background:rgba(15,26,22,.96);
  transition:max-height .42s var(--ease), padding .42s var(--ease);
}
.mobile-menu.open{ max-height:340px; padding:10px 20px 20px; }
.mobile-menu a{
  padding:13px 4px; color:rgba(255,255,255,.88); font-size:15px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg,#1E3A2E 0%,#0F1A16 45%,#070D0A 100%);
  padding:calc(112px + env(safe-area-inset-top)) 0 58px;
  min-height:640px; display:flex; flex-direction:column;
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 42% at 80% 16%, rgba(78,158,126,.30), transparent 68%),
    radial-gradient(48% 40% at 10% 84%, rgba(201,162,39,.22), transparent 70%),
    radial-gradient(70% 50% at 50% 0%, rgba(255,255,255,.05), transparent 60%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:0 20px; width:100%; }
.hero-eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-lt); border:1px solid var(--line-2); border-radius:999px;
  padding:6px 15px; margin-bottom:22px; background:rgba(201,162,39,.10);
}
.hero-title{
  font-family:var(--f-disp); font-size:clamp(40px,12.5vw,78px); font-weight:600;
  line-height:1.02; letter-spacing:-.01em; margin-bottom:20px;
}
.hero-title .line{ display:block; }
.hero-title .accent{
  background:linear-gradient(105deg,var(--gold-lt) 0%,var(--gold) 42%,var(--azure) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{
  max-width:52ch; color:rgba(255,255,255,.74); font-size:15.5px; font-weight:300;
  margin-bottom:28px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; max-width:520px;
}
.stat b{
  display:block; font-family:var(--f-disp); font-size:clamp(21px,6.4vw,30px);
  font-weight:600; color:var(--gold-lt); line-height:1.15;
}
.stat span{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.5); }

.hero-art{
  position:relative; z-index:1; width:min(78%,320px); margin:36px auto 0; opacity:.92;
}

/* ---------- Trust bar ---------- */
.trustbar{ background:var(--ink-2); color:#fff; border-top:1px solid rgba(255,255,255,.08); }
.trustbar-inner{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.09);
}
.trust{ background:var(--ink-2); padding:16px 4px; display:flex; flex-direction:column; gap:3px; }
.trust-k{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.trust-v{ font-size:13.5px; font-weight:600; color:var(--gold-lt); }

/* ---------- Sections ---------- */
.section{ padding:70px 0; }
.section-alt{ background:var(--paper); }
.kicker{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  font-weight:700; margin-bottom:12px;
}
.section-title{
  font-family:var(--f-disp); font-size:clamp(29px,8.2vw,46px); font-weight:600;
  color:var(--ink); margin-bottom:16px; letter-spacing:-.005em;
}
.section-title em{ font-style:italic; color:var(--gold); }
.section-lead{ color:var(--muted); max-width:62ch; margin-bottom:38px; font-size:15.5px; }

/* ---------- Split ---------- */
.split{ display:block; }
.split-text{ max-width:62ch; }
.split-text p{ color:var(--text); font-size:15.5px; }
.split-text strong{ color:var(--ink); font-weight:700; }

/* ---------- Pillars ---------- */
.pillars{ display:grid; gap:14px; margin-top:34px; }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pillar::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--azure));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar-n{
  font-family:var(--f-disp); font-size:30px; font-weight:700; color:var(--gold);
  line-height:1; opacity:.85; display:block; margin-bottom:10px;
}
.pillar h3{ font-family:var(--f-disp); font-size:21px; color:var(--ink); margin-bottom:7px; }
.pillar p{ font-size:14px; color:var(--muted); margin:0; }

/* ---------- Cards ---------- */
.grid-2{ display:grid; gap:16px; }
.grid-3{ display:grid; gap:16px; }
.card{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position:relative; overflow:hidden;
}
.section-alt .card{ background:#fff; }
.card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--azure));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card:hover::after{ transform:scaleX(1); }
.card-ico{
  width:56px; height:56px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(201,162,39,.15),rgba(78,158,126,.16)); color:var(--gold); margin-bottom:16px; border:1px solid var(--line-2);
}
.card h3{ font-family:var(--f-disp); font-size:21px; color:var(--ink); margin-bottom:8px; }
.card p{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.card p:last-child{ margin-bottom:0; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags li{
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink);
  background:rgba(201,162,39,.13); border:1px solid var(--line-2);
  padding:3px 10px; border-radius:999px;
}

/* ---------- Steps ---------- */
.steps{ display:grid; gap:14px; }
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; position:relative;
}
.step span{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--gold-lt); font-family:var(--f-disp); font-size:18px;
  font-weight:700; margin-bottom:12px;
}
.step h3{ font-family:var(--f-disp); font-size:19px; color:var(--ink); margin-bottom:5px; }
.step p{ font-size:13.5px; color:var(--muted); margin:0; }

/* ---------- Service list ---------- */
.svc-list{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.svc{
  background:var(--cream); padding:24px 22px; display:grid; grid-template-columns:auto 1fr; gap:16px;
  transition:background .3s var(--ease);
}
.svc:hover{ background:#fff; }
.svc-num{
  font-family:var(--f-disp); font-size:26px; font-weight:700; color:var(--gold);
  line-height:1; opacity:.85; min-width:38px;
}
.svc h3{ font-family:var(--f-disp); font-size:20px; color:var(--ink); margin-bottom:6px; }
.svc p{ font-size:14px; color:var(--muted); margin:0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:52px 0 96px; }
.footer-inner{ display:grid; gap:26px; }
.footer-brand{ display:flex; align-items:center; gap:12px; color:var(--gold-lt); }
.footer-brand p{ font-size:13px; color:rgba(255,255,255,.55); margin:0; }
.footer-brand strong{ font-family:var(--f-disp); font-size:19px; letter-spacing:.14em; color:#fff; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-nav a{ font-size:13.5px; color:rgba(255,255,255,.65); }
.footer-nav a:hover{ color:var(--gold-lt); }
.footer-legal{ font-size:11.5px; line-height:1.85; border-top:1px solid rgba(255,255,255,.1); padding-top:22px; }

/* ---------- Mobile bottom nav ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(15,26,22,.97); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.mb-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; color:rgba(255,255,255,.72); font-size:10.5px; font-weight:600;
  letter-spacing:.04em; transition:color .25s var(--ease); border-radius:12px;
}
.mb-item:hover,.mb-item.active{ color:var(--gold-lt); }
.mb-item.active{ background:rgba(201,162,39,.15); }
.mb-item.mb-main{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold)); border-radius:14px;
  margin:0 4px; padding:8px 4px; box-shadow:0 8px 20px -8px rgba(201,162,39,.80);
  color:#1A1403;
}
.mb-item.mb-main:hover,.mb-item.mb-main.active{ color:#1A1403; background:linear-gradient(135deg,var(--gold-lt),var(--gold)); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Desktop ---------- */
@media (min-width:700px){
  .wrap{ padding:0 32px; }
  .section{ padding:92px 0; }
  .trustbar-inner{ grid-template-columns:repeat(4,1fr); }
  .trust{ padding:20px 12px; }
  .grid-2{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .pillars{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .hero{ min-height:660px; }
  .hero-inner{ padding:0 32px; }
  .hero-art{ position:absolute; right:4%; bottom:6%; width:400px; margin:0; }
}

@media (min-width:1000px){
  .nav-desktop{ display:flex; }
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .hero{ min-height:720px; align-items:center; }
  .hero-inner{ max-width:60%; }
  .hero-art{ right:6%; bottom:auto; top:50%; transform:translateY(-50%); width:440px; }
  .split-text{ max-width:74ch; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .svc{ grid-template-columns:auto 1fr; padding:28px 30px; }
  .svc-num{ min-width:52px; font-size:32px; }
  .footer-inner{ grid-template-columns:auto 1fr; align-items:center; }
  .footer-legal{ grid-column:1/-1; }
  .mobile-bar{ display:none; }
  .site-footer{ padding-bottom:56px; }
}