/* =========================================================
   OZIEL ASCENT — DESIGN SYSTEM
   Signature: the Ascent Line — a topographic/elevation-profile
   motif (contour rings + a single rising route line) used as
   the page's structural thread: hero, section dividers, stats,
   and the process map all read as points along one climb.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- Light (default) ---- */
  --bg: #F6F4EE;
  --bg-alt: #EFEAE0;
  --surface: #FFFFFF;
  --surface-2: #F1EEE6;
  --text: #171B22;
  --text-soft: #4B5160;
  --text-mute: #7A8090;
  --border: rgba(23,27,34,0.10);
  --border-strong: rgba(23,27,34,0.18);

  --gold: #B7862C;
  --gold-strong: #96691E;
  --gold-tint: #F1E4C6;
  --emerald: #12513F;
  --emerald-strong: #0C3A2D;
  --emerald-tint: #DCEAE4;

  --line: rgba(23,27,34,0.14);
  --deep: #0C3A2D;
  --deep-2: #082820;
  --shadow-sm: 0 1px 2px rgba(20,20,15,0.06);
  --shadow-md: 0 8px 24px rgba(20,20,15,0.08);
  --shadow-lg: 0 24px 60px rgba(20,20,15,0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --container: 1200px;
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg: #0B0F17;
  --bg-alt: #0F1420;
  --surface: #121826;
  --surface-2: #171F30;
  --text: #ECEAE3;
  --text-soft: #B7BCC8;
  --text-mute: #838A99;
  --border: rgba(236,234,227,0.10);
  --border-strong: rgba(236,234,227,0.18);

  --gold: #D8B657;
  --gold-strong: #EBCE79;
  --gold-tint: rgba(216,182,87,0.14);
  --emerald: #4FAE8E;
  --emerald-strong: #6FC6A9;
  --emerald-tint: rgba(79,174,142,0.14);

  --line: rgba(236,234,227,0.12);
  --deep: #081712;
  --deep-2: #050f0b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.5);
  color-scheme: dark;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

::selection{background:var(--gold-tint); color:var(--text);}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--text);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-strong);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
html[data-theme="dark"] .eyebrow{color:var(--gold);}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold-strong);
}
html[data-theme="dark"] .eyebrow::before{background:var(--gold);}

.h1{font-size:clamp(2.4rem, 5vw, 4.4rem); font-weight:500;}
.h2{font-size:clamp(1.9rem, 3.4vw, 2.9rem);}
.h3{font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:500;}
.lede{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  color:var(--text-soft);
  font-weight:400;
  max-width:640px;
}
.mono{font-family:'IBM Plex Mono', monospace;}

.section{padding:110px 0;}
.section-tight{padding:70px 0;}
@media (max-width:768px){
  .section{padding:72px 0;}
  .section-tight{padding:48px 0;}
}

.section-head{
  max-width:680px;
  margin-bottom:56px;
}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:100px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.01em;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--emerald);
  color:#F6F4EE;
  box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .btn-primary{color:#08120E;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--emerald-strong);}

.btn-ghost{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-strong); transform:translateY(-2px);}
html[data-theme="dark"] .btn-ghost:hover{color:var(--gold);}

.btn-gold{
  background:var(--gold);
  color:#1A1204;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--gold-strong); color:#fff;}

.btn-sm{padding:10px 18px; font-size:13.5px;}
.btn-block{width:100%; justify-content:center;}
.btn svg{width:16px; height:16px; transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:12px 0;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:19px; font-weight:600; letter-spacing:-0.01em;}
.brand-mark{width:30px; height:30px; flex-shrink:0;}
.brand-mark path{stroke:var(--gold); }
.brand-mark .peak{fill:var(--gold);}

.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{
  font-size:14px; font-weight:500; color:var(--text-soft);
  position:relative; padding:4px 0; transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--gold);
}
.nav-actions{display:flex; align-items:center; gap:14px;}

.theme-toggle{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover{border-color:var(--gold); transform:rotate(15deg);}
.theme-toggle svg{width:18px; height:18px; stroke:var(--text);}
.theme-toggle .sun{display:none;}
html[data-theme="dark"] .theme-toggle .sun{display:block;}
html[data-theme="dark"] .theme-toggle .moon{display:none;}

.nav-burger{
  display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-burger span{display:block; width:16px; height:1.5px; background:var(--text); transition:transform .25s ease, opacity .25s ease;}

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; padding:100px 28px 48px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.7,0,.2,1);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; touch-action:pan-y;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{font-family:'Fraunces', serif; font-size:30px; padding:14px 0; border-bottom:1px solid var(--border); color:var(--text);}
.mobile-menu .btn{margin-top:24px; flex-shrink:0; justify-content:center; text-align:center;}

@media (max-height:700px){
  .mobile-menu{padding-top:84px;}
  .mobile-menu a{font-size:24px; padding:10px 0;}
}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
}
@media (max-width:560px){
  .nav-actions .btn-primary{display:none;}
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{width:64px; height:64px;}
.loader-mark path{stroke-dasharray:220; stroke-dashoffset:220; animation:draw 1.4s ease-in-out infinite alternate;}
.loader-label{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute);}
@keyframes draw{
  0%{stroke-dashoffset:220;}
  100%{stroke-dashoffset:0;}
}

/* ---------- Ascent line divider (signature) ---------- */
.ascent-divider{width:100%; height:64px; opacity:.9;}
.ascent-divider path{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
}
.ascent-divider.in-view path{stroke-dashoffset:0;}
.ascent-divider circle{
  fill:var(--gold); opacity:0; transition:opacity .4s ease .9s;
}
.ascent-divider.in-view circle{opacity:1;}

.contour-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
}
html[data-theme="dark"] .contour-bg{opacity:.35;}
.contour-bg path{fill:none; stroke:var(--line); stroke-width:1;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1.in-view{transition-delay:.08s;}
.reveal-delay-2.in-view{transition-delay:.16s;}
.reveal-delay-3.in-view{transition-delay:.24s;}
.reveal-delay-4.in-view{transition-delay:.32s;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border-strong);}

.glass{
  background:color-mix(in srgb, var(--surface) 65%, transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border);
}

.icon-badge{
  width:48px; height:48px; border-radius:12px;
  background:var(--emerald-tint);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.icon-badge svg{width:22px; height:22px; stroke:var(--emerald); stroke-width:1.6;}
html[data-theme="dark"] .icon-badge svg{stroke:var(--emerald-strong);}

.tag{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:100px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em;
  background:var(--gold-tint); color:var(--gold-strong); text-transform:uppercase;
}

/* ---------- Grids ---------- */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:960px){.grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}}
@media (max-width:860px){.grid-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.grid-5{grid-template-columns:1fr;}}

/* ---------- Stats ---------- */
.stat-num{font-family:'Fraunces', serif; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:500; color:var(--text);}
.stat-num .mono-suffix{font-family:'IBM Plex Mono', monospace; font-size:0.5em; color:var(--gold-strong); margin-left:4px;}
.stat-label{font-size:13.5px; color:var(--text-mute); margin-top:6px;}

/* ---------- Footer ---------- */
.cta-band{
  background:var(--deep);
  color:#F3F1E8;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

footer{
  background:var(--deep-2);
  color:#EDE9DC;
  padding:80px 0 30px;
  position:relative;
}
footer a{color:#C9D6CE; transition:color .2s ease;}
footer a:hover{color:var(--gold);}
footer h4{color:#fff; font-size:14px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-bottom:18px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color:#9FB0A6; flex-wrap:wrap; gap:12px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

.social-row{display:flex; gap:12px; margin-top:18px;}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;}
.social-row svg{width:16px; height:16px;}

/* ---------- Back to top ---------- */
#backToTop{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:48px; height:48px; border-radius:50%;
  background:var(--emerald); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
#backToTop.show{opacity:1; transform:translateY(0); pointer-events:auto;}
#backToTop:hover{background:var(--emerald-strong);}
#backToTop svg{width:18px; height:18px;}

/* ---------- WhatsApp sticky ---------- */
#waBtn{
  position:fixed; left:24px; bottom:24px; z-index:80;
  display:flex; align-items:center; gap:10px;
  background:#1FA855; color:#fff; padding:13px 18px 13px 13px;
  border-radius:100px; box-shadow:var(--shadow-md);
  font-size:13.5px; font-weight:600;
  transition:transform .25s ease;
}
#waBtn:hover{transform:translateY(-3px);}
#waBtn svg{width:22px; height:22px;}

@media (max-width:640px){
  #waBtn span{display:none;}
  #waBtn{padding:14px; }
  #backToTop{width:44px; height:44px; right:16px; bottom:16px;}
  #waBtn{left:16px; bottom:16px;}
}

/* ---------- Forms ---------- */
.field{margin-bottom:20px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--text-soft);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-tint);
}
.field textarea{resize:vertical; min-height:120px;}

/* ---------- Accessibility: focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:#1A1204;
  padding:12px 18px; z-index:1000; font-weight:600; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:24px 0; background:none; border:none; text-align:left;
  font-family:'Fraunces', serif; font-size:1.05rem; color:var(--text);
}
.faq-q svg{width:18px; height:18px; flex-shrink:0; transition:transform .3s ease; stroke:var(--gold-strong);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{padding-bottom:24px; color:var(--text-soft); max-width:640px;}

/* ---------- Misc utility ---------- */
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-sm{gap:12px;}
.gap-md{gap:20px;}
.text-center{text-align:center;}
.mt-lg{margin-top:48px;}
.mx-auto{margin-left:auto; margin-right:auto;}
.pill-row{display:flex; flex-wrap:wrap; gap:10px;}
.rel{position:relative;}
.z1{position:relative; z-index:1;}

.hero{
  padding:170px 0 110px;
  position:relative;
  overflow:hidden;
}
@media (max-width:768px){.hero{padding:140px 0 70px;}}

.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.badge-row span{
  font-size:12px; font-family:'IBM Plex Mono', monospace; color:var(--text-mute);
  border:1px solid var(--border); padding:6px 12px; border-radius:100px;
}

.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:36px;}}

.page-hero{padding:150px 0 70px; position:relative; overflow:hidden;}
@media (max-width:768px){.page-hero{padding:120px 0 50px;}}
.page-hero-graphic{
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  width:400px; opacity:.5; pointer-events:none; z-index:0;
}
html[data-theme="dark"] .page-hero-graphic{opacity:.32;}
@media (max-width:1150px){.page-hero-graphic{display:none;}}

.breadcrumb{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-mute); letter-spacing:.05em; margin-bottom:20px;}
.breadcrumb a{color:var(--text-mute);}
.breadcrumb a:hover{color:var(--gold-strong);}