/* ============================================================
   Sun & Safari — Shared Inner-Page Theme
   Include on every page (except the homepage, which is
   self-contained):  <link rel="stylesheet" href="/theme.css">
   Pair with /theme.js and /footer-widget.js
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --blue:#104cba; --accent-start:#FF3834; --accent-end:#FF7133;
  --dark1:#30077d; --dark2:#0a5bc7; --dark3:#2ca4eb;
  --text:#16181d; --text-mid:#454a54; --text-muted:#6a707b;
  --white:#fff; --bg:#f5f7fb; --border:#e4e8f0;
  --grad-acc:linear-gradient(to right,#FF3834,#FF7133);
  --grad-dark:linear-gradient(135deg,#30077d 0%,#0a5bc7 55%,#2ca4eb 100%);
  --grad-diag:linear-gradient(150deg,#30077d 15%,#0a5bc7 48%,#2ca4eb 100%);
  --grad-text:linear-gradient(100deg,#FF3834,#FF7133 60%,#ffb133);
  --fh:'Poppins',sans-serif; --fb:'Quicksand',sans-serif;
  --rc:18px; --rp:999px;
  --sh:0 6px 30px rgba(16,45,110,.08); --shl:0 22px 60px rgba(16,45,110,.16);
  --gutter:2.5vw; --pv:96px; --nav-h:72px;
}

html { scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:calc(var(--nav-h) + 8px); }
body { font-family:var(--fb); font-size:16px; font-weight:500; line-height:1.85; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap { width:100%; padding-left:var(--gutter); padding-right:var(--gutter); max-width:1560px; margin:0 auto; }
.wrap-n { max-width:980px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

h1,h2,h3,h4 { font-family:var(--fh); font-weight:700; line-height:1.2; color:var(--text); letter-spacing:-.015em; }
h1 { font-size:clamp(32px,4.4vw,58px); font-weight:800; }
h2 { font-size:clamp(26px,2.9vw,40px); }
h3 { font-size:clamp(19px,2.2vw,27px); }
h4 { font-size:clamp(16px,1.5vw,20px); font-weight:600; }
p  { font-size:15.5px; line-height:1.85; color:var(--text-mid); }
a  { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
.gt { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
:focus-visible { outline:3px solid var(--dark3); outline-offset:3px; border-radius:4px; }

/* reveal */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity:1; transform:none; }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* eyebrow */
.ey { display:inline-flex; align-items:center; gap:9px; font-family:var(--fh); font-size:11.5px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.ey::before { content:''; width:28px; height:2.5px; background:var(--grad-acc); border-radius:2px; flex-shrink:0; }
.ey.w { color:rgba(255,255,255,.85); }
.ey.c { justify-content:center; }
.ey.c::after { content:''; width:28px; height:2.5px; background:var(--grad-acc); border-radius:2px; flex-shrink:0; }

/* buttons */
.btn { position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--fh); font-size:15px; font-weight:600; padding:15px 34px; border-radius:var(--rp); border:none; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s; white-space:nowrap; }
.btn .ar { transition:transform .25s; font-family:var(--fb); }
.btn:hover .ar { transform:translateX(5px); }
.btn-fill { background:var(--grad-acc); color:#fff; box-shadow:0 8px 24px rgba(255,56,52,.28); }
.btn-fill:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(255,56,52,.4); }
.btn-ghost { background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(6px); }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.16); transform:translateY(-3px); }
.btn-line { background:transparent; color:var(--blue); border:2px solid var(--blue); }
.btn-line:hover { background:var(--blue); color:#fff; transform:translateY(-3px); }

/* sections */
.sec { padding:var(--pv) 0; width:100%; }
.sec-lt { background:var(--bg); }
.sec-dk { background:var(--grad-dark); }
.sec-dg { background:var(--grad-diag); }
.sec-hdr { text-align:center; margin-bottom:56px; }
.sec-hdr h2 { margin-bottom:14px; }
.sec-hdr p { max-width:640px; margin:0 auto; }

/* ── NAV (shared across inner pages) ─────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:400; transition:background .35s, box-shadow .35s; background:linear-gradient(to bottom, rgba(10,20,60,.45), rgba(10,20,60,0)); }
.nav.sc { background:rgba(22,24,60,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 4px 24px rgba(10,20,60,.28); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 var(--gutter); max-width:1560px; margin:0 auto; height:var(--nav-h); }
.nav-logo { font-family:var(--fh); font-size:22px; font-weight:800; color:#fff; letter-spacing:-.5px; display:flex; align-items:center; gap:9px; }
.nav-logo .sun { width:30px; height:30px; border-radius:50%; background:var(--grad-acc); display:inline-flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 4px 14px rgba(255,86,51,.45); }
.nav-links { display:flex; list-style:none; align-items:center; gap:2px; }
.nav-links a { font-family:var(--fh); font-size:14.5px; font-weight:500; color:rgba(255,255,255,.9); padding:10px 15px; border-radius:var(--rp); transition:color .25s, background .25s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:#fff; background:rgba(255,255,255,.12); }
.nav-cta { display:inline-flex; align-items:center; background:var(--grad-acc); color:#fff; font-family:var(--fh); font-size:14px; font-weight:600; padding:10px 24px; border-radius:var(--rp); box-shadow:0 6px 18px rgba(255,56,52,.32); transition:transform .25s, box-shadow .25s; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,56,52,.45); }
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:10px; background:none; border:none; }
.ham span { width:26px; height:2px; background:#fff; border-radius:2px; display:block; transition:transform .3s, opacity .3s; }
.ham[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ham[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ham[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mob { display:none; flex-direction:column; gap:2px; background:rgba(20,22,58,.97); backdrop-filter:blur(14px); padding:16px var(--gutter) 22px; list-style:none; }
.nav-mob a { display:block; color:rgba(255,255,255,.92); font-family:var(--fh); font-size:15.5px; font-weight:500; padding:12px 10px; border-radius:10px; }
.nav-mob a:hover { background:rgba(255,255,255,.09); }
.nav-mob.open { display:flex; }

/* ── PAGE HERO BANNER (inner pages) ─────────────────────── */
.phero { position:relative; background:var(--grad-diag); color:#fff; padding:calc(var(--nav-h) + 88px) 0 96px; overflow:hidden; }
.phero::before { content:''; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,113,51,.24), transparent 65%); }
.phero::after { content:''; position:absolute; bottom:-140px; left:-100px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(44,164,235,.28), transparent 65%); }
.phero.has-img { background:var(--grad-diag); }
.phero-img { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; mix-blend-mode:luminosity; }
.phero-in { position:relative; z-index:2; max-width:860px; }
.phero h1 { color:#fff; margin-bottom:16px; }
.phero p.lead { color:rgba(255,255,255,.9); font-size:17px; max-width:640px; }
.crumb { display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--fh); font-size:11.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:18px; }
.crumb a { color:#fff; border-bottom:1.5px solid rgba(255,255,255,.45); transition:border-color .2s; }
.crumb a:hover { border-color:#fff; }
.crumb .sep { opacity:.55; }
.phero-wave { position:absolute; bottom:-1px; left:0; right:0; pointer-events:none; z-index:3; }
.phero-wave svg { width:100%; height:60px; display:block; }

/* ── SHARED COMPONENTS ───────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.tcard { background:#fff; border-radius:var(--rc); box-shadow:var(--sh); padding:30px 24px; min-width:0; transition:transform .35s, box-shadow .35s; }
.tcard:hover { transform:translateY(-6px); box-shadow:var(--shl); }
.tcard-ico { width:56px; height:56px; border-radius:16px; background:var(--grad-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; box-shadow:0 8px 20px rgba(16,76,186,.26); }
.tcard h4 { margin-bottom:8px; }
.tcard p { font-size:14.5px; margin:0; }
.img-r { border-radius:var(--rc); overflow:hidden; box-shadow:var(--shl); }
.img-r img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.img-r:hover img { transform:scale(1.05); }
.check-list { list-style:none; margin-top:18px; }
.check-list li { font-size:14.5px; padding:6px 0; display:flex; align-items:flex-start; gap:10px; color:var(--text-mid); }
.check-list li::before { content:'✓'; color:#fff; background:var(--grad-acc); width:18px; height:18px; border-radius:50%; font-size:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; margin-top:5px; flex-shrink:0; }

/* CTA band */
.cta-band { position:relative; background:var(--grad-dark); border-radius:var(--rc); padding:56px 48px; color:#fff; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; box-shadow:var(--shl); }
.cta-band::before { content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,113,51,.3), transparent 65%); }
.cta-band h2 { color:#fff; margin-bottom:8px; }
.cta-band p { color:rgba(255,255,255,.86); margin:0; max-width:520px; }
.cta-band > div, .cta-band > a { position:relative; }

/* forms */
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { margin-bottom:15px; }
.fg label { display:block; font-family:var(--fh); font-size:11.5px; font-weight:600; color:var(--text); margin-bottom:7px; text-transform:uppercase; letter-spacing:1px; }
.fg input,.fg select,.fg textarea { width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:11px; font-family:var(--fb); font-size:14.5px; color:var(--text); transition:border-color .25s, box-shadow .25s; outline:none; background:var(--bg); }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(16,76,186,.1); }
.fg textarea { resize:vertical; min-height:120px; }
.fg input::placeholder,.fg textarea::placeholder { color:#a5aab4; }
.btn-sub { width:100%; display:block; text-align:center; background:var(--grad-acc); color:#fff; font-family:var(--fh); font-size:15.5px; font-weight:600; padding:16px 40px; border-radius:var(--rp); border:none; cursor:pointer; box-shadow:0 10px 26px rgba(255,56,52,.3); transition:transform .25s, box-shadow .25s; }
.btn-sub:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,56,52,.42); }
.form-card { background:#fff; border:1px solid var(--border); border-radius:var(--rc); box-shadow:var(--shl); padding:34px 30px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1080px){
  .two-col,.card-grid-3 { grid-template-columns:1fr; }
  .card-grid-4 { grid-template-columns:1fr 1fr; }
}
@media(max-width:720px){
  :root { --pv:64px; }
  .nav-links,.nav-cta { display:none; }
  .ham { display:flex; }
  .card-grid-4 { grid-template-columns:1fr; }
  .f-row { grid-template-columns:1fr; }
  .cta-band { padding:40px 26px; }
  .form-card { padding:26px 20px; }
  .phero { padding:calc(var(--nav-h) + 60px) 0 72px; }
}