/* ============================================
   Sussel Olivar — Global Design System
   ============================================ */
:root{
  --c-primary:#143D99;
  --c-dark:#0C2A70;
  --c-gold:#E7B33B;
  --c-magenta:#C85AA4;
  --c-white:#FFFFFF;
  --c-gray:#F8FAFC;
  --c-text:#1E293B;
  --c-muted:#64748B;
  --c-border:#E2E8F0;

  --grad-brand:linear-gradient(135deg,#143D99 0%,#0C2A70 60%,#C85AA4 130%);
  --grad-gold:linear-gradient(135deg,#E7B33B,#C85AA4);

  --sh-sm:0 4px 12px -4px rgba(15,23,42,.08);
  --sh-md:0 14px 30px -10px rgba(20,61,153,.18);
  --sh-lg:0 30px 60px -20px rgba(20,61,153,.30);

  --ff-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-display:'Plus Jakarta Sans','Inter',sans-serif;

  --r-sm:.5rem; --r-md:.85rem; --r-lg:1.25rem; --r-xl:2rem;
  --nav-h:72px;
  --container:1200px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  color:var(--c-text);
  background:var(--c-white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--c-primary);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--ff-display);font-weight:700;color:var(--c-text);letter-spacing:-.01em;line-height:1.2}

/* Container */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* Sections */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section-alt{background:var(--c-gray)}
.section-head{text-align:center;max-width:680px;margin:0 auto clamp(2rem,4vw,3.5rem)}
.section-head h2{font-size:clamp(1.8rem,3.5vw,2.75rem);margin:1rem 0}
.section-head p{color:var(--c-muted);font-size:1.05rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .2s ease,box-shadow .25s ease,background .25s,color .25s;
  cursor:pointer;white-space:nowrap;line-height:1;border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:.65rem 1.1rem;font-size:.85rem}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 24px -8px rgba(20,61,153,.5)}
.btn-primary:hover{box-shadow:0 16px 32px -8px rgba(20,61,153,.6)}
.btn-ghost{background:rgba(20,61,153,.06);color:var(--c-primary)}
.btn-ghost:hover{background:rgba(20,61,153,.12)}
.btn-gold{background:linear-gradient(135deg,var(--c-gold),#f5cc66);color:#1a1a1a;box-shadow:0 10px 24px -8px rgba(231,179,59,.55)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}

/* Forms */
.form{display:grid;gap:.85rem}
.form input,.form textarea{
  width:100%;padding:.95rem 1.1rem;border:1px solid var(--c-border);border-radius:var(--r-md);
  font:inherit;background:#fff;color:var(--c-text);transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(20,61,153,.12)}
.form textarea{resize:vertical;min-height:120px}

/* Header / Nav */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;backdrop-filter:none;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--c-border);
  box-shadow:0 6px 20px -10px rgba(15,23,42,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1rem}
a.btn.btn-primary.btn-sm {
    color: #fff;
}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--c-text)}
.brand img{border-radius:.5rem;display:block}
.brand-logo-only img{height:clamp(44px,7vw,58px);width:auto;border-radius:0}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--ff-display);font-size:1rem;color:var(--c-text)}
.brand em{font-style:normal;font-size:.72rem;color:var(--c-muted);letter-spacing:.05em;text-transform:uppercase}
.brand-light b,.brand-light{color:#fff}
.brand-light em{color:rgba(255,255,255,.6)}
.footer .brand-light img{filter:brightness(0) invert(1);height:48px;width:auto;border-radius:0}

.nav-menu{display:none;align-items:center;gap:1.75rem}
.nav-menu a{color:var(--c-text);font-weight:500;font-size:.92rem;transition:color .2s;position:relative}
.nav-menu a:not(.btn):hover{color:var(--c-primary)}
.nav-menu a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.nav-menu a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
@media(min-width:1024px){.nav-menu{display:flex}}

.burger{display:flex;flex-direction:column;gap:5px;padding:.5rem}
.burger span{display:block;width:24px;height:2px;background:var(--c-text);transition:transform .25s,opacity .2s}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1024px){.burger{display:none}}

.nav-menu.open{
  display:flex;flex-direction:column;position:absolute;top:var(--nav-h);left:0;right:0;
  background:rgba(255,255,255,.98);backdrop-filter:blur(20px);padding:1.5rem;gap:1.25rem;
  border-bottom:1px solid var(--c-border);box-shadow:var(--sh-md);
}

/* Footer */
.footer{background:#0a1d4a;color:rgba(255,255,255,.8);padding:4rem 0 1.5rem;margin-top:0}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-bottom:2.5rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h5{color:#fff;font-size:.95rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.08em}
.footer a{display:block;color:rgba(255,255,255,.7);font-size:.9rem;padding:.3rem 0;transition:color .2s}
.footer a:hover{color:#fff}
.footer p{font-size:.9rem;margin-top:.85rem;opacity:.7;max-width:340px}
.socials{display:flex;gap:.6rem}
.socials a{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:0;
}
.socials a:hover{background:var(--c-primary);color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;opacity:.7;
}
.footer-bottom a{display:inline;padding:0}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}

/* Utilities */
.text-grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}