/* ============================================================================
   Travel Jobs Australia — marketing site design system
   Light theme matching the live app: white/glass surfaces, navy text,
   orange→gold gradient CTAs (travellers), blue→purple (employers),
   Playfair Display headings + DM Sans body. Self-contained (no Tailwind/JS dep)
   so the SEO pages stay fast and fully crawlable.
   ============================================================================ */

:root {
  --navy-900:#102a43; --navy-800:#243b53; --navy-700:#334e68; --navy-600:#486581;
  --navy-500:#627d98; --navy-400:#829ab1; --navy-300:#9fb3c8; --navy-200:#bcccdc;
  --navy-100:#d9e2ec; --navy-50:#f0f4f8;
  --gold-500:#f0b429; --gold-600:#de911d; --gold-400:#f7c948;
  --grad-traveller:linear-gradient(135deg,#ff6b35,#ffc107);
  --grad-traveller-3:linear-gradient(135deg,#ff6b35,#ffc107,#00c853);
  --grad-employer:linear-gradient(135deg,#00bcd4,#2979ff,#7c4dff);
  --ink:#102a43; --muted:#627d98; --line:rgba(16,42,67,0.08);
  --shadow-sm:0 2px 10px rgba(16,42,67,0.06);
  --shadow:0 10px 40px rgba(16,42,67,0.10);
  --radius:18px; --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:#fff; line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Playfair Display',Georgia,serif; color:var(--navy-900); line-height:1.08; letter-spacing:-0.5px; }

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

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:14px; border:none; cursor:pointer; transition:transform .2s, box-shadow .2s; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-traveller{ background:var(--grad-traveller); color:#fff; box-shadow:0 6px 22px rgba(255,107,53,0.30); }
.btn-employer{ background:var(--grad-employer); color:#fff; box-shadow:0 6px 22px rgba(41,121,255,0.28); }
.btn-dark{ background:var(--navy-900); color:#fff; }
.btn-ghost{ background:rgba(16,42,67,0.04); color:var(--navy-800); border:1px solid var(--line); }
.btn-lg{ font-size:17px; padding:16px 30px; border-radius:16px; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--line); }
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--navy-900); }
.brand .roo{ font-size:26px; }
.brand b{ color:var(--gold-600); }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-size:15px; font-weight:600; color:var(--navy-700); transition:color .15s; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--gold-600); }
.header-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--navy-800); cursor:pointer; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden;
  background:radial-gradient(900px 500px at 85% -20%,rgba(240,180,41,0.10),transparent 60%),
             radial-gradient(700px 500px at -10% 120%,rgba(41,121,255,0.08),transparent 60%),
             linear-gradient(180deg,#fbfdff,#f2f6fb); }
.hero .inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:84px 0 90px; }
.eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); background:rgba(240,180,41,0.12); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.hero h1{ font-size:clamp(2.4rem,5vw,3.9rem); font-weight:800; }
.hero h1 .grad{ background:var(--grad-employer); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.lead{ font-size:20px; color:var(--navy-600); margin:22px 0 30px; max-width:540px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{ margin-top:26px; font-size:14px; color:var(--navy-500); display:flex; gap:20px; flex-wrap:wrap; }
.hero-trust b{ color:var(--navy-800); }
.hero-media{ position:relative; }
.hero-media img{ border-radius:24px; box-shadow:var(--shadow); width:100%; height:480px; object-fit:cover; }
.img-placeholder{ border-radius:24px; height:480px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; text-align:center; padding:24px; background:var(--grad-employer); box-shadow:var(--shadow); }
.img-placeholder small{ display:block; opacity:.85; font-weight:500; margin-top:8px; font-size:13px; }
.img-placeholder .ph-brand{ text-align:center; line-height:1.22; }
.img-placeholder .ph-brand span{ font-size:54px; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.img-placeholder .ph-brand b{ font-family:'Playfair Display',Georgia,serif; font-size:23px; font-weight:800; letter-spacing:-.3px; }

/* ---------- Sections ---------- */
section{ padding:78px 0; }
.section-head{ max-width:680px; margin:0 auto 48px; text-align:center; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.8rem); font-weight:800; }
.section-head p{ color:var(--navy-600); font-size:19px; margin-top:16px; }
.bg-soft{ background:var(--navy-50); }

/* ---------- Feature grid / cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card .ico{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--navy-50); margin-bottom:18px; }
.card h3{ font-size:21px; margin-bottom:8px; font-family:'DM Sans',sans-serif; font-weight:700; color:var(--navy-900); }
.card p{ color:var(--navy-600); font-size:16px; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.step{ position:relative; padding-top:8px; }
.step .num{ counter-increment:step; width:44px; height:44px; border-radius:50%; background:var(--grad-employer);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.step .num::before{ content:counter(step); }
.step h3{ font-family:'DM Sans',sans-serif; font-size:19px; font-weight:700; margin-bottom:6px; }
.step p{ color:var(--navy-600); font-size:16px; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat .n{ font-family:'Playfair Display',serif; font-size:44px; font-weight:800; color:var(--navy-900); }
.stat .l{ color:var(--navy-500); font-size:15px; font-weight:600; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--line); padding:20px 4px; }
.faq summary{ font-weight:700; font-size:18px; color:var(--navy-900); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; }
.faq summary::after{ content:'+'; color:var(--gold-600); font-size:24px; line-height:1; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ color:var(--navy-600); margin-top:12px; font-size:16px; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(135deg,#0c2138,#102a43); color:#fff; border-radius:28px;
  padding:60px; text-align:center; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 80% -20%,rgba(240,180,41,0.18),transparent 60%); }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); position:relative; z-index:1; }
.cta-band p{ color:var(--navy-200); margin:16px auto 28px; max-width:560px; position:relative; z-index:1; }
.cta-band .hero-actions{ justify-content:center; position:relative; z-index:1; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-900); color:var(--navy-300); padding:56px 0 30px; font-size:15px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.site-footer .brand{ color:#fff; margin-bottom:14px; }
.site-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; font-family:'DM Sans',sans-serif; }
.site-footer a{ display:block; color:var(--navy-300); padding:5px 0; }
.site-footer a:hover{ color:var(--gold-400); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; text-align:center; color:var(--navy-500); font-size:14px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .inner{ grid-template-columns:1fr; gap:36px; padding:56px 0 60px; }
  .hero-media{ order:-1; }
  .hero-media img,.img-placeholder{ height:300px; }
  .grid-3,.steps,.stats{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
  .nav.open{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    background:#fff; padding:20px 24px; gap:16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav-toggle{ display:block; }
}
@media (max-width:560px){
  .grid-3,.grid-2,.steps,.stats{ grid-template-columns:1fr; }
  .cta-band{ padding:40px 24px; }
  .header-cta .btn-traveller{ display:none; }
}

/* ============================================================================
   POLISH LAYER — atmosphere, depth, motion (scroll reveals), micro-interactions
   ============================================================================ */

/* Grain/noise overlay for subtle texture on atmospheric sections */
.grain{ position:relative; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Hero depth: floating glass card overlapping the media */
.hero-media{ isolation:isolate; }
.float-card{
  position:absolute; left:-22px; bottom:-22px; z-index:2;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-radius:18px; padding:16px 20px;
  box-shadow:0 16px 40px rgba(16,42,67,0.18); display:flex; align-items:center; gap:14px; max-width:280px;
}
.float-card .fc-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--navy-50); }
.float-card .fc-t{ font-weight:800; color:var(--navy-900); font-size:15px; line-height:1.2; }
.float-card .fc-s{ color:var(--navy-500); font-size:13px; }
@media (max-width:900px){ .float-card{ left:12px; bottom:12px; } }

/* Eyebrow accent line */
.eyebrow.line::before{ content:""; display:inline-block; width:18px; height:2px; background:var(--gold-500); vertical-align:middle; margin-right:8px; border-radius:2px; }

/* Card hover: gradient top edge reveal + lift */
.card{ position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:var(--grad-traveller-3); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.card:hover::before{ transform:scaleX(1); }
.card.employer::before{ background:var(--grad-employer); }
.card .ico{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.card:hover .ico{ transform:translateY(-2px) rotate(-4deg); }

/* Oversized ghost step numbers for editorial rhythm */
.step{ padding-left:0; }
.step .num{ box-shadow:0 8px 22px rgba(41,121,255,0.28); }

/* Pill marquee of categories */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.pill{ flex:none; padding:11px 20px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:600; color:var(--navy-700); font-size:15px; box-shadow:var(--shadow-sm); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Scroll-reveal — only when motion is allowed */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal-stagger.in > *{ opacity:1; transform:none; }
  .reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
  .reveal-stagger.in > *:nth-child(2){ transition-delay:.10s; }
  .reveal-stagger.in > *:nth-child(3){ transition-delay:.18s; }
  .reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }
  .reveal-stagger.in > *:nth-child(5){ transition-delay:.34s; }
  .reveal-stagger.in > *:nth-child(6){ transition-delay:.42s; }
  .hero .eyebrow,.hero h1,.hero .lead,.hero-actions,.hero-trust{ animation:heroUp .9s cubic-bezier(.16,1,.3,1) both; }
  .hero h1{ animation-delay:.06s; } .hero .lead{ animation-delay:.14s; }
  .hero-actions{ animation-delay:.22s; } .hero-trust{ animation-delay:.30s; }
  @keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
}
.btn{ position:relative; }
.btn-traveller:hover{ box-shadow:0 10px 30px rgba(255,107,53,0.42); }
.btn-employer:hover{ box-shadow:0 10px 30px rgba(41,121,255,0.40); }

/* Traveller-themed pages (find work / 88-day) use the orange→gold gradient */
body.theme-traveller .hero h1 .grad{ background:var(--grad-traveller); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.theme-traveller .step .num{ background:var(--grad-traveller); box-shadow:0 8px 22px rgba(255,107,53,0.30); }
body.theme-traveller .float-card .fc-ico{ background:#fff5ec; }
body.theme-traveller .img-placeholder{ background:var(--grad-traveller-3); }