/* =========================================================
   Abraham Global Trade — Corporate Landing
   Palette inspired by the Venezuelan Troupial (turpial):
   deep black, vibrant orange, golden yellow, cream, green.
   ========================================================= */

:root{
  --ink:        #0E0F12;
  --ink-2:      #17181d;
  --ink-3:      #212329;
  --orange:     #F26418;
  --orange-2:   #D9500B;
  --gold:       #F5A623;
  --gold-soft:  #FFC02E;
  --green:      #2E7D46;
  --cream:      #FBF7F0;
  --paper:      #ffffff;
  --line:       #ece6dc;
  --text:       #23262e;
  --muted:      #6b6f78;
  --muted-2:    #9aa0aa;
  --white:      #ffffff;

  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 18px 50px -20px rgba(14,15,18,.28);
  --shadow-soft:0 10px 30px -14px rgba(14,15,18,.22);
  --maxw:       1160px;

  --font:       'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display:    'Plus Jakarta Sans', var(--font);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); line-height:1.14; letter-spacing:-.02em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* ---------- Buttons ---------- */
.btn{
  --pad:14px 24px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad); border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ --pad:10px 18px; font-size:.9rem; }
.btn--full{ width:100%; }
.btn--primary{ background:linear-gradient(135deg,var(--gold) 0%, var(--orange) 60%, var(--orange-2) 100%); color:#fff; box-shadow:0 12px 26px -12px rgba(242,100,24,.7); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(242,100,24,.75); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:rgba(14,15,18,.16); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }

/* ---------- Top bar ---------- */
.topbar{ background:var(--ink); color:#cfd2d8; font-size:.82rem; }
.topbar__inner{ display:flex; gap:26px; align-items:center; height:40px; }
.topbar__item{ display:inline-flex; align-items:center; gap:7px; }
.topbar__item svg{ color:var(--gold); }
.topbar__item--muted{ margin-left:auto; color:var(--muted-2); }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.header__inner{ display:flex; align-items:center; gap:24px; height:70px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ display:inline-flex; }
.brand__text{ font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:1.02rem; color:var(--ink); line-height:1; display:flex; flex-direction:column; }
.brand__sub{ font-size:.6rem; font-weight:700; letter-spacing:.28em; color:var(--orange); margin-top:3px; }

.nav{ display:flex; gap:28px; margin-left:14px; }
.nav a{ font-size:.92rem; font-weight:500; color:var(--muted); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--orange); transition:width .22s ease; border-radius:2px; }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.header__cta{ margin-left:auto; }

.hamburger{ display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer; }
.hamburger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Eyebrow ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); }
.eyebrow--dark{ color:var(--orange-2); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(242,100,24,.15); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:radial-gradient(120% 120% at 80% -10%, #1c1e25 0%, var(--ink) 55%); color:#fff; overflow:hidden; }
.hero__glow{ position:absolute; inset:0; background:
    radial-gradient(600px 300px at 78% 20%, rgba(242,100,24,.28), transparent 70%),
    radial-gradient(500px 260px at 10% 90%, rgba(245,166,35,.18), transparent 70%);
  pointer-events:none; }
.hero__inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:84px 24px 96px; }
.hero__title{ font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:800; margin:18px 0 20px; }
.hero__title .accent{ background:linear-gradient(120deg,var(--gold-soft),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead{ font-size:1.1rem; color:#c8ccd4; max-width:36em; }
.hero__actions{ display:flex; gap:14px; margin:30px 0 26px; flex-wrap:wrap; }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.hero .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.hero__trust{ display:flex; gap:26px; flex-wrap:wrap; list-style:none; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.hero__trust li{ font-size:.9rem; color:#aeb3bd; }
.hero__trust strong{ color:#fff; font-weight:600; }

/* Hero panel / card */
.hero__panel{ position:relative; }
.card3d{ background:linear-gradient(180deg,#212329,#17181d); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:20px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); transform:perspective(1200px) rotateY(-8deg) rotateX(3deg); }
.card3d__row{ display:flex; align-items:center; justify-content:space-between; }
.card3d__id{ font-size:.8rem; color:var(--muted-2); font-family:var(--display); }
.pill{ font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.04em; }
.pill--orange{ background:rgba(242,100,24,.16); color:var(--gold-soft); border:1px solid rgba(242,100,24,.35); }
.card3d__map{ position:relative; margin:16px 0; background:#0d0e12; border-radius:14px; padding:14px; border:1px solid rgba(255,255,255,.06); }
.card3d__map svg{ width:100%; height:120px; }
.route{ animation:dash 2.4s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-40; } }
.map__from,.map__to{ position:absolute; font-size:.72rem; color:#cfd2d8; }
.map__from{ left:14px; bottom:12px; } .map__to{ right:14px; top:22px; }
.card3d__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.card3d__stats > div{ background:#0d0e12; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 10px; text-align:center; }
.card3d__stats .k{ display:block; font-size:.68rem; color:var(--muted-2); margin-bottom:4px; }
.card3d__stats .v{ display:block; font-weight:700; font-family:var(--display); color:var(--gold-soft); }
.floaty{ position:absolute; background:#fff; color:var(--ink); font-size:.8rem; font-weight:600; padding:9px 14px; border-radius:12px; box-shadow:var(--shadow); }
.floaty--1{ top:-14px; right:6%; animation:float 4s ease-in-out infinite; }
.floaty--2{ bottom:-16px; left:-4%; animation:float 4s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- Stats ---------- */
.stats{ background:var(--cream); border-bottom:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:40px 24px; text-align:center; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat__num{ font-family:var(--display); font-weight:800; font-size:2.6rem; color:var(--ink); line-height:1; }
.stat__plus{ display:none; }
.stat{ position:relative; }
.stat__label{ font-size:.9rem; color:var(--muted); margin-top:8px; }

/* ---------- Sections ---------- */
.section{ padding:88px 0; }
.section--alt{ background:var(--cream); }
.section__head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section__title{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; color:var(--ink); margin:14px 0 12px; }
.section__title--light{ color:#fff; }
.section__sub{ color:var(--muted); font-size:1.05rem; }

.grid{ display:grid; gap:22px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* Services */
.svc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.svc__icon{ width:52px; height:52px; display:grid; place-items:center; font-size:1.5rem; background:linear-gradient(135deg, rgba(245,166,35,.16), rgba(242,100,24,.14)); border-radius:14px; margin-bottom:16px; }
.svc h3{ font-size:1.15rem; color:var(--ink); margin-bottom:8px; }
.svc p{ color:var(--muted); font-size:.95rem; }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; }
.step__no{ font-family:var(--display); font-weight:800; font-size:1.6rem; color:transparent; -webkit-text-stroke:1.5px var(--orange); display:block; margin-bottom:12px; }
.step h3{ font-size:1.1rem; color:var(--ink); margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.93rem; }
.step::after{ content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%); color:var(--orange); font-weight:700; }
.step:last-child::after{ display:none; }

/* Markets */
.markets__grid{ gap:22px; }
.market{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.section--alt .market{ background:#fff; }
.market h3{ font-size:1.15rem; color:var(--ink); margin-bottom:18px; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.tags li{ background:var(--cream); border:1px solid var(--line); color:var(--text); font-size:.88rem; padding:8px 14px; border-radius:999px; }
.section--alt .tags li{ background:#faf6ef; }
.checklist{ list-style:none; display:grid; gap:12px; }
.checklist li{ position:relative; padding-left:30px; color:var(--text); }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:50%; font-size:.72rem; font-weight:700; }

/* About / dark */
.section--dark{ background:linear-gradient(160deg,#17181d,#0E0F12); color:#fff; }
.about__inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about__copy p{ color:#c2c6ce; margin:14px 0; }
.about__copy .btn{ margin-top:12px; }
.factcard{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:30px; }
.factcard__title{ font-size:1.15rem; color:#fff; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); }
.facts{ display:grid; gap:14px; }
.facts > div{ display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.facts dt{ color:var(--muted-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.facts dd{ color:#eef0f3; font-weight:500; font-size:.95rem; }
.factcard__note{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:var(--muted-2); }

/* Testimonials */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; }
.quote::before{ content:"\201C"; font-family:Georgia,serif; font-size:3.4rem; color:var(--orange); line-height:.5; position:absolute; top:24px; left:22px; opacity:.18; }
.quote p{ color:var(--text); font-size:1.02rem; margin-bottom:20px; position:relative; }
.quote__name{ display:block; font-weight:700; color:var(--ink); font-family:var(--display); }
.quote__role{ display:block; font-size:.85rem; color:var(--muted); }

/* Features (compliance) */
.feat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; }
.feat__ic{ font-size:1.7rem; margin-bottom:12px; }
.feat h3{ font-size:1.05rem; color:var(--ink); margin-bottom:8px; }
.feat p{ color:var(--muted); font-size:.9rem; }

/* CTA band */
.ctaband{ background:linear-gradient(120deg,var(--orange) 0%, var(--orange-2) 55%, #b8420a 100%); color:#fff; }
.ctaband__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:56px 24px; flex-wrap:wrap; }
.ctaband h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; }
.ctaband p{ color:rgba(255,255,255,.9); margin-top:8px; }

/* Contact */
.contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact__list{ list-style:none; display:grid; gap:20px; margin-top:28px; }
.contact__list li{ display:flex; gap:14px; align-items:flex-start; }
.ci{ width:42px; height:42px; flex:none; display:grid; place-items:center; background:var(--cream); border:1px solid var(--line); border-radius:12px; font-size:1.1rem; }
.contact__list strong{ color:var(--ink); }
.contact__list div{ color:var(--muted); font-size:.95rem; }

.contact__form{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:var(--shadow-soft); }
.field{ margin-bottom:18px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field input,.field textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-family:inherit; font-size:.95rem; color:var(--text); background:#fdfcfa; transition:border-color .18s ease, box-shadow .18s ease; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,100,24,.14); }
.field textarea{ resize:vertical; }
.form__note{ margin-top:12px; font-size:.9rem; text-align:center; min-height:1em; }
.form__note.ok{ color:var(--green); }
.form__note.err{ color:var(--orange-2); }

/* Footer */
.footer{ background:var(--ink); color:#aeb3bd; padding-top:64px; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding-bottom:40px; }
.brand--footer .brand__text{ color:#fff; }
.footer__brand p{ margin-top:16px; font-size:.92rem; max-width:34em; }
.footer__addr{ color:var(--muted-2)!important; font-size:.85rem!important; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__cols h4{ color:#fff; font-size:.9rem; margin-bottom:14px; letter-spacing:.04em; }
.footer__cols a{ display:block; font-size:.9rem; color:#aeb3bd; padding:5px 0; transition:color .16s; }
.footer__cols a:hover{ color:var(--gold-soft); }
.footer__bottom{ display:flex; justify-content:space-between; gap:16px; padding:22px 24px; border-top:1px solid rgba(255,255,255,.08); font-size:.83rem; color:var(--muted-2); flex-wrap:wrap; }

/* 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:960px){
  .nav, .header__cta{ display:none; }
  .hamburger{ display:flex; }
  .nav.open{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:#fff; padding:16px 24px; gap:6px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav.open a{ padding:10px 0; }
  .hero__inner{ grid-template-columns:1fr; gap:48px; padding:64px 24px 80px; }
  .hero__panel{ max-width:440px; }
  .about__inner, .contact__inner{ grid-template-columns:1fr; gap:36px; }
  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step::after{ display:none; }
}
@media (max-width:620px){
  .topbar__item:not(.topbar__item--muted):nth-child(2){ display:none; }
  .topbar__item--muted{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .grid--2,.grid--3,.grid--4,.steps,.markets__grid,.field--row{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:32px; }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .section{ padding:64px 0; }
  .facts > div{ grid-template-columns:110px 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}