<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta name="theme-color" content="#0a0a0f">
<title>AussieStart — Your working holiday, simplified.</title>
<meta name="description" content="Jobs, accommodation, and community for international travelers, work-and-travelers, and immigrants worldwide.">
<link rel="canonical" href="https://aussiestart.com/">

<!-- ─── FAVICON (early — for Google indexing) ─── -->
<link rel="shortcut icon" href="/favicon.ico?v=4">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=4">
<link rel="icon" type="image/png" sizes="32x32" href="/pwa-icons/icon-32.png?v=4">
<link rel="icon" type="image/png" sizes="192x192" href="/pwa-icons/icon-192.png?v=4">

<!-- Open Graph -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://aussiestart.com/">
<meta property="og:title"       content="AussieStart — Where your journey begins">
<meta property="og:description" content="Jobs, accommodation, and community for international travelers, work-and-travelers, and immigrants worldwide.">
<meta property="og:site_name"   content="AussieStart">
<meta property="og:image"       content="https://aussiestart.com/uploads/og-default.jpg">

<!-- Twitter Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="AussieStart — Where your journey begins">
<meta name="twitter:description" content="Jobs, accommodation, and community for international travelers and work-and-travelers.">
<meta name="twitter:image"       content="https://aussiestart.com/uploads/og-default.jpg">

<!-- Schema.org Organization (helps Google understand the brand) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "AussieStart",
  "url": "https://aussiestart.com",
  "logo": "https://aussiestart.com/uploads/logo.png",
  "description": "International platform for jobs, accommodation, and community — for Work & Travelers, immigrants, and tourists worldwide.",
  "sameAs": [],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "Customer Service",
    "email": "support@aussiestart.com",
    "availableLanguage": ["en", "de"]
  }
}
</script>

<!-- Schema.org WebSite (enables Google sitelinks search box) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://aussiestart.com",
  "name": "AussieStart",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://aussiestart.com/jobs?keyword={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
  --p:#00925a;--pd:#006B3E;--pl:#10b981;--pg:rgba(0,146,90,.3);
  --y:#FFCD00;--yd:#f0a500;--yg:rgba(255,205,0,.3);
  --a1:#0ea5e9;--a2:#7c3aed;--a3:#f59e0b;--a4:#ec4899;
  --bg:#070710;--bg2:#0d0d18;--bg3:#13131e;--bg4:#1a1a26;
  --bo:rgba(255,255,255,.07);--boh:rgba(255,255,255,.13);
  --tx:#f1f5f9;--txd:#64748b;--txdd:#94a3b8;
  --rl:18px;--rxl:24px;--ease:cubic-bezier(.4,0,.2,1)
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--pd);border-radius:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 1.25rem}@media(min-width:768px){.wrap{padding:0 2rem}}

/* ────── SCROLL PROGRESS BAR ────── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--p),var(--y),var(--a4));width:0;z-index:1000;transition:width .1s linear;box-shadow:0 0 10px var(--pg)}

/* ────── NAV ────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(7,7,16,.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--bo);padding:.85rem 0;transition:padding .3s}
.nav.scrolled{padding:.6rem 0;background:rgba(7,7,16,.95)}
.nav-i{max-width:1400px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}@media(min-width:768px){.nav-i{padding:0 2rem}}
.logo{font-family:'Space Grotesk',sans-serif;font-size:1.42rem;font-weight:800;color:#fff;letter-spacing:-.025em;display:inline-flex;align-items:baseline;position:relative;text-decoration:none}
.logo span{color:var(--y);position:relative}
.logo span::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--y),transparent);border-radius:2px;opacity:0;transform:scaleX(.6);transition:opacity .3s,transform .3s}
.logo:hover span::after{opacity:1;transform:scaleX(1)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
/* Nav is now centralized via as_nav.php (burger menu side-panel) */

/* ────── BUTTONS ────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.85rem 1.7rem;border-radius:50px;font-weight:600;font-size:.92rem;border:1.5px solid transparent;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}
.btn-p{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;box-shadow:0 8px 24px var(--pg)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--pg)}
.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.btn-p:hover::after{transform:translateX(100%)}
.btn-g{background:rgba(255,255,255,.05);border-color:var(--boh);color:var(--tx);backdrop-filter:blur(10px)}
.btn-g:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.btn-y{background:var(--y);color:#0a0a0f;border-color:var(--y);box-shadow:0 8px 24px var(--yg)}
.btn-y:hover{background:#ffd633;transform:translateY(-2px);box-shadow:0 14px 34px var(--yg)}
.btn-y::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.btn-y:hover::after{transform:translateX(100%)}
.btn-lg{padding:1.1rem 2.2rem;font-size:1rem}

/* ────── ALERTS ────── */
.alert{padding:.85rem 1.15rem;border-radius:12px;margin:1rem auto;display:flex;align-items:flex-start;gap:.65rem;font-size:.88rem;max-width:480px}
.a-err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.a-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86efac}

/* ════════════════════════════════════════════════════ */
/*  HERO — AURORA + ROTATING WORD                        */
/* ════════════════════════════════════════════════════ */
.hero{position:relative;padding:6rem 0 7rem;overflow:hidden;min-height:90vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora{position:absolute;border-radius:50%;filter:blur(100px);opacity:.55;animation:aurora 20s ease-in-out infinite;will-change:transform}
.aurora.a-1{top:-20%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,146,90,.55),transparent 70%);animation-delay:0s}
.aurora.a-2{top:30%;right:-15%;width:700px;height:700px;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 70%);animation-delay:-7s}
.aurora.a-3{bottom:-15%;left:30%;width:600px;height:600px;background:radial-gradient(circle,rgba(14,165,233,.4),transparent 70%);animation-delay:-14s}
.aurora.a-4{top:50%;left:50%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,205,0,.18),transparent 70%);animation-delay:-3s}
@keyframes aurora{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,-50px) scale(1.1)}66%{transform:translate(-50px,40px) scale(.95)}}

/* Particles */
.particle{position:absolute;width:3px;height:3px;background:var(--y);border-radius:50%;box-shadow:0 0 12px var(--y);animation:floatUp 14s linear infinite;opacity:0}
@keyframes floatUp{0%{opacity:0;transform:translateY(100vh) translateX(0)}10%{opacity:.7}90%{opacity:.6}100%{opacity:0;transform:translateY(-100px) translateX(30px)}}

/* Grain */
.grain{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.4;mix-blend-mode:overlay}

.hero-in{position:relative;z-index:2;text-align:center;max-width:920px;margin:0 auto}
.hero-tag{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.04);border:1px solid var(--boh);padding:.5rem 1.2rem;border-radius:50px;font-size:.78rem;color:rgba(255,255,255,.85);font-weight:600;margin-bottom:2rem;backdrop-filter:blur(10px)}
.hero-tag i{color:var(--y);font-size:.7rem;animation:pulse 2.5s ease-in-out infinite}
.hero-tag .glob{display:inline-block;animation:spin 12s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.hero h1{font-size:clamp(2.5rem,7vw,5rem);margin-bottom:1.4rem;line-height:1.05;font-weight:800;letter-spacing:-.04em}
.hero h1 .grad{background:linear-gradient(120deg,var(--y) 0%,var(--p) 50%,var(--a1) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;background-size:200% 100%;animation:gradShift 8s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.rot-word{display:inline-grid;vertical-align:bottom;line-height:1.05}
.rot-word span{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease);background:linear-gradient(120deg,var(--y),var(--a3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center;white-space:nowrap}
.rot-word span.active{opacity:1;transform:translateY(0)}

.hero-sub{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--txdd);margin-bottom:2.8rem;max-width:680px;margin-left:auto;margin-right:auto;line-height:1.55}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3.5rem}

.hero-trust{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--txdd)}
.hero-trust .it{display:flex;align-items:center;gap:.5rem}
.hero-trust .it i{color:var(--p);font-size:.95rem}

/* ────── COUNTRY MARQUEE ────── */
.country-strip{padding:1.5rem 0;background:var(--bg2);border-top:1px solid var(--bo);border-bottom:1px solid var(--bo);overflow:hidden;position:relative}
.country-strip::before,.country-strip::after{content:'';position:absolute;top:0;width:80px;height:100%;z-index:2;pointer-events:none}
.country-strip::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.country-strip::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.marquee{display:flex;width:max-content;animation:marquee 50s linear infinite;gap:3rem}
.country-strip:hover .marquee{animation-play-state:paused}
.marquee .it{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--txdd);font-weight:600;flex-shrink:0;white-space:nowrap}
.marquee .it .flag{font-size:1.4rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ════════════════════════════════════════════════════ */
/*  STATS                                                */
/* ════════════════════════════════════════════════════ */
.stats{padding:5rem 0;position:relative;background:var(--bg2)}
.stats-g{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;text-align:center}
@media(min-width:768px){.stats-g{grid-template-columns:repeat(4,1fr)}}
.st{position:relative;padding:1.5rem 1rem}
.st-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4.5vw,3rem);font-weight:800;background:linear-gradient(120deg,var(--y),var(--p));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:.45rem}
.st-lab{font-size:.78rem;color:var(--txd);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}

/* ════════════════════════════════════════════════════ */
/*  USER PATHS                                           */
/* ════════════════════════════════════════════════════ */
.paths{padding:7rem 0;position:relative}
.section-hd{text-align:center;max-width:680px;margin:0 auto 4rem}
.section-tag{display:inline-block;font-size:.74rem;color:var(--y);font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem;padding:.3rem .8rem;background:rgba(255,205,0,.08);border-radius:50px;border:1px solid rgba(255,205,0,.2)}
.section-hd h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1rem;font-weight:800}
.section-hd p{color:var(--txdd);font-size:1.05rem}

.path-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.path-grid{grid-template-columns:repeat(3,1fr)}}
.path{background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--bo);border-radius:var(--rxl);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:all .4s var(--ease);will-change:transform}
.path::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--p),transparent);opacity:0;transition:opacity .3s}
.path:hover{transform:translateY(-8px);border-color:var(--p)}
.path:hover::before{opacity:1}
.path .ico{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--pd),var(--p));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.4rem;box-shadow:0 8px 22px var(--pg)}
.path:nth-child(2) .ico{background:linear-gradient(135deg,#5b21b6,var(--a2));box-shadow:0 8px 22px rgba(124,58,237,.3)}
.path:nth-child(3) .ico{background:linear-gradient(135deg,#0369a1,var(--a1));box-shadow:0 8px 22px rgba(14,165,233,.3)}
.path h3{font-size:1.35rem;margin-bottom:.6rem;font-weight:700}
.path p{color:var(--txdd);font-size:.95rem;line-height:1.65;margin-bottom:1.25rem}
.path ul{list-style:none}
.path ul li{padding:.45rem 0;font-size:.86rem;color:rgba(255,255,255,.78);display:flex;gap:.6rem;align-items:flex-start}
.path ul li i{color:var(--p);margin-top:.2rem;flex-shrink:0;font-size:.85rem}
.path:nth-child(2) ul li i{color:var(--a2)}
.path:nth-child(3) ul li i{color:var(--a1)}

/* ════════════════════════════════════════════════════ */
/*  HOW IT WORKS                                         */
/* ════════════════════════════════════════════════════ */
.how{padding:7rem 0;background:var(--bg2);border-top:1px solid var(--bo);border-bottom:1px solid var(--bo)}
.steps{display:grid;grid-template-columns:1fr;gap:1.5rem;position:relative}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}.steps::before{content:'';position:absolute;top:5.5rem;left:16%;right:16%;height:2px;background:linear-gradient(90deg,var(--p),var(--a2),var(--a1));opacity:.3;border-radius:2px;z-index:0}}
.step{background:var(--bg3);border:1px solid var(--bo);border-radius:var(--rxl);padding:2.25rem 1.85rem;position:relative;z-index:1;transition:all .35s}
.step:hover{transform:translateY(-6px);border-color:var(--p)}
.step .num-circle{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--bg4),var(--bg3));border:2px solid var(--p);color:var(--y);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:1.2rem;box-shadow:0 0 0 6px var(--bg2),0 0 30px rgba(0,146,90,.3)}
.step h3{font-size:1.2rem;margin-bottom:.6rem}
.step p{color:var(--txdd);font-size:.92rem;line-height:1.65}

/* ════════════════════════════════════════════════════ */
/*  FEATURES — 3D TILT                                   */
/* ════════════════════════════════════════════════════ */
.feats{padding:7rem 0;position:relative}
.fg{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.fg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.fg{grid-template-columns:repeat(3,1fr)}}
.fc{background:var(--bg3);border:1px solid var(--bo);border-radius:var(--rxl);padding:2rem 1.85rem;position:relative;overflow:hidden;transition:all .35s var(--ease);transform-style:preserve-3d;will-change:transform}
.fc::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(0,146,90,.1),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.fc:hover{border-color:rgba(0,146,90,.4);box-shadow:0 16px 50px rgba(0,0,0,.4)}
.fc:hover::before{opacity:1}
.fc .ic{font-size:1.85rem;background:linear-gradient(135deg,var(--p),var(--a1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.1rem;display:inline-block;transition:transform .3s}
.fc:hover .ic{transform:scale(1.15) rotate(-5deg)}
.fc h3{font-size:1.1rem;margin-bottom:.6rem;font-weight:700}
.fc p{color:var(--txdd);font-size:.9rem;line-height:1.65}

/* ════════════════════════════════════════════════════ */
/*  TESTIMONIALS                                         */
/* ════════════════════════════════════════════════════ */
.test{padding:7rem 0;background:var(--bg2);border-top:1px solid var(--bo);border-bottom:1px solid var(--bo);position:relative;overflow:hidden}
.test::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:600px;background:radial-gradient(ellipse,rgba(124,58,237,.08),transparent 70%);pointer-events:none}
.test-g{display:grid;grid-template-columns:1fr;gap:1.5rem;position:relative;z-index:1}
@media(min-width:768px){.test-g{grid-template-columns:repeat(3,1fr)}}
.test-card{background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--bo);border-radius:var(--rxl);padding:2rem 1.85rem;position:relative;transition:all .35s}
.test-card:hover{transform:translateY(-5px);border-color:rgba(255,205,0,.3)}
.test-card .q-mark{position:absolute;top:1.4rem;right:1.4rem;font-size:2.5rem;color:rgba(255,205,0,.18);font-family:Georgia,serif;line-height:1}
.test-stars{display:flex;gap:.15rem;margin-bottom:1rem;font-size:.85rem;color:var(--y)}
.test-text{font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.65;margin-bottom:1.5rem;font-style:italic}
.test-author{display:flex;align-items:center;gap:.85rem;padding-top:1.2rem;border-top:1px solid var(--bo)}
.test-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--a1));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.95rem;flex-shrink:0}
.test-card:nth-child(2) .test-avatar{background:linear-gradient(135deg,var(--a2),var(--a4))}
.test-card:nth-child(3) .test-avatar{background:linear-gradient(135deg,var(--a3),var(--y))}
.test-name{font-weight:700;font-size:.92rem}
.test-role{font-size:.78rem;color:var(--txd);margin-top:.15rem;display:flex;align-items:center;gap:.4rem}

/* ════════════════════════════════════════════════════ */
/*  PRICING — corrected                                  */
/* ════════════════════════════════════════════════════ */
.pricing{padding:7rem 0;position:relative;overflow:hidden}
.pricing::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(124,58,237,.13),transparent 70%);pointer-events:none}
.pg{display:grid;grid-template-columns:1fr;gap:1.25rem;position:relative;z-index:1}
@media(min-width:640px){.pg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.pg{grid-template-columns:repeat(4,1fr)}}

.pc{
  background:var(--bg3);
  border:1px solid var(--bo);
  border-radius:var(--rxl);
  padding:2.25rem 1.6rem;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:all .35s var(--ease)
}
.pc:hover{transform:translateY(-6px);border-color:var(--boh);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.pc.popular{border-color:var(--y);background:linear-gradient(180deg,rgba(255,205,0,.04),var(--bg3))}
.pc.popular:hover{box-shadow:0 20px 50px rgba(255,205,0,.18)}
.pc-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--y),var(--yd));color:#0a0a0f;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;padding:.32rem .9rem;border-radius:50px;white-space:nowrap;box-shadow:0 6px 20px rgba(255,205,0,.4)}
.pc-tier{font-size:.72rem;color:var(--txd);font-weight:700;text-transform:uppercase;letter-spacing:1.8px;margin-bottom:.85rem}
.pc.popular .pc-tier{color:var(--y)}
.pc-amt{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:800;line-height:1;margin-bottom:.4rem;color:#fff}
.pc-amt .cur{font-size:1.1rem;vertical-align:super;opacity:.7;margin-right:.1rem}
.pc-amt .per{font-size:.85rem;color:var(--txd);font-weight:400}
.pc-tag{color:var(--txdd);font-size:.85rem;margin-bottom:1.5rem;min-height:2.5em}
.pc-feats{list-style:none;margin-bottom:1.85rem;flex:1}
.pc-feats li{padding:.45rem 0;font-size:.84rem;color:rgba(255,255,255,.85);display:flex;gap:.55rem;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.04)}
.pc-feats li:last-child{border-bottom:none}
.pc-feats li i{color:var(--p);margin-top:.25rem;flex-shrink:0;font-size:.78rem}
.pc.popular .pc-feats li i{color:var(--y)}
.pc-feats li strong{color:var(--y);font-weight:600}
.pc-btn{display:block;width:100%;padding:.9rem;text-align:center;background:rgba(255,255,255,.06);border:1px solid var(--boh);border-radius:50px;font-weight:600;color:#fff;font-size:.88rem;transition:all .25s;cursor:pointer;text-decoration:none}
.pc-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.pc.popular .pc-btn{background:linear-gradient(135deg,var(--y),var(--yd));color:#0a0a0f;border-color:var(--y)}
.pc.popular .pc-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,205,0,.4)}

.pricing-note{text-align:center;color:var(--txd);font-size:.85rem;margin-top:2.5rem}
.pricing-note strong{color:var(--y)}

/* ════════════════════════════════════════════════════ */
/*  CTA FINAL                                            */
/* ════════════════════════════════════════════════════ */
.ctaf{padding:7rem 0 8rem;text-align:center;position:relative;overflow:hidden}
.ctaf-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,107,62,.18),rgba(124,58,237,.12),rgba(14,165,233,.1));pointer-events:none}
.ctaf-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,205,0,.08),transparent 60%)}
.ctaf-in{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 1.25rem}
.ctaf h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem;font-weight:800;letter-spacing:-.03em}
.ctaf h2 .grad{background:linear-gradient(120deg,var(--y),var(--p),var(--a1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gradShift 6s ease infinite}
.ctaf p{color:var(--txdd);font-size:1.1rem;margin-bottom:2.5rem;line-height:1.6}

/* ════════════════════════════════════════════════════ */
/*  FOOTER                                               */
/* ════════════════════════════════════════════════════ */
footer{background:var(--bg);border-top:1px solid var(--bo);padding:4rem 0 2rem;position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--p),var(--a2),var(--a1),transparent)}
.foot-top{display:grid;grid-template-columns:1fr;gap:3rem;margin-bottom:3rem}
@media(min-width:900px){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}}
.foot-brand .logo{font-size:1.6rem;margin-bottom:.85rem}
.foot-brand .desc{color:var(--txd);font-size:.88rem;line-height:1.65;max-width:320px;margin-bottom:1.25rem}
.foot-social{display:flex;gap:.5rem}
.foot-social a{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1px solid var(--bo);display:flex;align-items:center;justify-content:center;color:var(--txd);transition:all .25s;font-size:.95rem}
.foot-social a:hover{background:var(--bg4);border-color:var(--p);color:var(--p);transform:translateY(-3px)}
.foot-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--y);margin-bottom:1rem;font-weight:700}
.foot-col ul{list-style:none}
.foot-col ul li{padding:.32rem 0;font-size:.86rem}
.foot-col ul li a{color:var(--txdd);transition:color .2s}
.foot-col ul li a:hover{color:var(--tx)}
.foot-news h4{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--y);margin-bottom:.85rem;font-weight:700}
.foot-news p{color:var(--txd);font-size:.82rem;margin-bottom:1rem;line-height:1.55}
.foot-news form{display:flex;gap:.4rem}
.foot-news input{flex:1;padding:.6rem .85rem;background:var(--bg3);border:1px solid var(--bo);border-radius:50px;color:var(--tx);font-size:.85rem;min-width:0}
.foot-news input:focus{outline:none;border-color:var(--p)}
.foot-news button{padding:.6rem 1rem;background:var(--p);border:none;border-radius:50px;color:#fff;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s}
.foot-news button:hover{background:var(--pl)}
.foot-news .nl-msg{font-size:.78rem;color:#86efac;margin-top:.5rem}

.foot-bot{padding-top:2rem;border-top:1px solid var(--bo);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--txd)}
.foot-bot .left{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.foot-bot .right{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-bot .right a{color:var(--txd);transition:color .2s}
.foot-bot .right a:hover{color:var(--tx)}


/* ════════════════════════════════════════════════════ */
/*  LOGGED-IN VIEW                                       */
/* ════════════════════════════════════════════════════ */
.l-hero{padding:3.5rem 0 2rem;position:relative;overflow:hidden}
.l-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,146,90,.12),transparent 70%);pointer-events:none}
.l-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.45rem;position:relative}
.l-hero h1 .name{background:linear-gradient(120deg,var(--y),var(--p));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.l-hero p{color:var(--txdd);font-size:1rem;position:relative}
.l-quick{padding:0 0 2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
@media(min-width:640px){.l-quick{grid-template-columns:repeat(4,1fr)}}
.qa{background:var(--bg3);border:1px solid var(--bo);border-radius:var(--rl);padding:1.2rem;text-align:center;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.qa:hover{border-color:rgba(0,146,90,.4);transform:translateY(-3px)}
.qa i{font-size:1.55rem;color:var(--p)}
.qa span{font-size:.84rem;font-weight:600}

.lsec-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.lsec-hd h2{font-size:1.4rem}
.lsec-hd a{color:var(--p);font-size:.86rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s}
.lsec-hd a:hover{gap:.5rem}

.list-row{padding:2.5rem 0;border-top:1px solid var(--bo)}
.l-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.l-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.l-grid{grid-template-columns:repeat(4,1fr)}}
.l-card{background:var(--bg3);border:1px solid var(--bo);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;transition:all .3s}
.l-card:hover{border-color:rgba(0,146,90,.4);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.l-card .lc-body{padding:1.1rem 1.15rem;flex:1;display:flex;flex-direction:column}
.l-card h3{font-size:.97rem;margin-bottom:.3rem;line-height:1.35}
.l-card .co{font-size:.78rem;color:var(--txd);margin-bottom:.65rem}
.l-card .meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.l-card .pill{font-size:.7rem;padding:.22rem .55rem;background:var(--bg4);border:1px solid var(--bo);border-radius:50px;color:var(--txdd)}
.l-card .price{font-family:'Space Grotesk',sans-serif;color:var(--y);font-weight:700;font-size:.9rem;margin-top:auto;padding-top:.5rem}
.l-empty{padding:2rem;text-align:center;background:var(--bg3);border:1px dashed var(--bo);border-radius:var(--rl);color:var(--txd)}
.l-empty i{font-size:2rem;color:var(--p);margin-bottom:.65rem;display:block}

/* ────── LOGIN MODAL ────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--bo);border-radius:var(--rxl);max-width:420px;width:100%;padding:2.25rem;position:relative;animation:modalIn .3s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-x{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--txd);font-size:1.5rem;padding:.5rem;cursor:pointer}
.modal-x:hover{color:var(--tx)}
.modal h3{font-size:1.5rem;margin-bottom:.4rem;text-align:center}
.modal p{color:var(--txdd);font-size:.88rem;text-align:center;margin-bottom:1.5rem}
.fg-mod{margin-bottom:1rem}
.fg-mod label{display:block;font-size:.78rem;font-weight:600;color:var(--txd);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.45rem}
.fi-mod{width:100%;padding:.78rem 1rem;background:var(--bg4);border:1.5px solid var(--bo);border-radius:10px;color:var(--tx);font-size:.92rem;transition:border-color .2s}
.fi-mod:focus{outline:none;border-color:var(--p)}
.modal .btn{width:100%;justify-content:center;margin-top:.85rem}
.modal-foot{text-align:center;margin-top:1.4rem;font-size:.85rem;color:var(--txd)}
.modal-foot a{color:var(--y);font-weight:600}

/* ────── SCROLL ANIMATIONS ────── */
.fadeup{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fadeup.v{opacity:1;transform:translateY(0)}
.fadeup-d1{transition-delay:.08s}.fadeup-d2{transition-delay:.16s}.fadeup-d3{transition-delay:.24s}.fadeup-d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Newsletter form: AJAX states */
.foot-news form{position:relative}
.foot-news button{position:relative;transition:opacity .2s,background .2s}
.foot-news button:disabled{cursor:wait;opacity:.7}
.nl-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:nlspin .7s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.foot-news button.is-loading .nl-spinner{display:inline-block}
.foot-news button.is-loading #nlIcon,.foot-news button.is-loading .fa-paper-plane{visibility:hidden}
.foot-news input.is-success{border-color:rgba(16,185,129,.5)!important;background:rgba(16,185,129,.06)!important}
.foot-news input.is-error{border-color:rgba(239,68,68,.5)!important;background:rgba(239,68,68,.06)!important}
.foot-news .nl-msg{margin-top:.65rem;font-size:.83rem;line-height:1.5;animation:nlmsgin .35s var(--ease)}
.foot-news .nl-msg[hidden]{display:none !important}
@keyframes nlspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes nlmsgin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

</style>
<!-- ─── PWA META TAGS ─── -->
<link rel="manifest" href="/manifest.json?v=6">
<meta name="theme-color" content="#00925a">
<meta name="application-name" content="AussieStart">
<meta name="mobile-web-app-capable" content="yes">

<!-- ─── FAVICON (for browser tab + Google search results) ─── -->
<!-- Most important: /favicon.ico — Google's primary lookup path -->
<link rel="shortcut icon" href="/favicon.ico?v=6">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=6">
<!-- Standard PNG sizes Google indexes for SERP -->
<link rel="icon" type="image/png" sizes="16x16"   href="/pwa-icons/icon-16.png?v=6">
<link rel="icon" type="image/png" sizes="32x32"   href="/pwa-icons/icon-32.png?v=6">
<link rel="icon" type="image/png" sizes="48x48"   href="/pwa-icons/icon-48.png?v=6">
<link rel="icon" type="image/png" sizes="96x96"   href="/pwa-icons/icon-96.png?v=6">
<link rel="icon" type="image/png" sizes="192x192" href="/pwa-icons/icon-192.png?v=6">
<link rel="icon" type="image/png" sizes="512x512" href="/pwa-icons/icon-512.png?v=6">

<!-- iOS Safari (required for PWA install + Web Push on iOS 16.4+) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="AussieStart">
<!-- iOS-preferred apple-touch-icon sizes (180 = modern iPhone, 152 = older iPad).
     The ?v=6 cache-busts iOS's aggressive home-screen icon cache. -->
<link rel="apple-touch-icon" sizes="180x180" href="/pwa-icons/icon-180.png?v=6">
<link rel="apple-touch-icon" sizes="152x152" href="/pwa-icons/icon-152.png?v=6">
<link rel="apple-touch-icon" sizes="192x192" href="/pwa-icons/icon-192.png?v=6">
<link rel="apple-touch-icon" href="/pwa-icons/icon-180.png?v=6"><!-- fallback for older iOS -->

<!-- iOS PWA: safe-area handling for notch/dynamic island.
     Only applies when installed as PWA (display-mode: standalone). -->
<style>
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    /* Push nav down below the iPhone notch/status bar */
    .nav { padding-top: calc(env(safe-area-inset-top) + .75rem) !important; }
    /* Account for home-indicator bar at bottom on iPhone X+ */
    body { padding-bottom: env(safe-area-inset-bottom); }
    /* Side insets for landscape orientation */
    .wrap, .nav-i { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    /* Mobile-Drawer / Burger-Menu close buttons — must clear notch */
    .mob-close, .drawer-x, .menu-close, [class*="close-btn"] {
      top: calc(env(safe-area-inset-top) + 1.25rem) !important;
    }
    /* Mobile-Drawer content top-padding so menu links don't hide under notch */
    .mob-nav, .drawer, .mobile-menu {
      padding-top: calc(env(safe-area-inset-top) + 1rem) !important;
    }
  }
}

/* ─── PORTRAIT-LOCK OVERLAY (iOS PWA workaround) ─────────────────────────
   iOS Safari ignores manifest.json's "orientation: portrait", so we show
   a polite "please rotate" overlay when a mobile device is held landscape.
   Only fires on small screens (≤ tablet width) AND in standalone PWA mode.
*/
.aussie-rotate-lock {
  display: none;
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #11111c, #0a0a0f);
  z-index: 2147483647;  /* sit on top of literally everything */
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.aussie-rotate-lock .icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: aussieRotateHint 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes aussieRotateHint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}
.aussie-rotate-lock h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 .5rem;
  color: #FFCD00;
}
.aussie-rotate-lock p {
  font-size: .95rem;
  color: #cbd5e1;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* Mobile landscape (height very short) — show overlay only in PWA standalone */
@media (display-mode: standalone) and (orientation: landscape) and (max-height: 500px) {
  .aussie-rotate-lock { display: flex !important; }
  /* Hide all other body content so it can't be interacted with */
  body > :not(.aussie-rotate-lock) { visibility: hidden !important; }
}
/* Also catch Safari mobile (not standalone) on narrow landscape — optional */
@media (orientation: landscape) and (max-height: 450px) and (hover: none) and (pointer: coarse) {
  .aussie-rotate-lock { display: flex !important; }
  body > :not(.aussie-rotate-lock) { visibility: hidden !important; }
}
</style>

<!-- Rotate-lock overlay (rendered hidden, CSS toggles visibility based on orientation) -->
<div class="aussie-rotate-lock" aria-hidden="true">
  <div class="icon">📱</div>
  <h2>Please rotate your device</h2>
  <p>AussieStart is designed for portrait mode. Rotate your phone upright to continue.</p>
</div>

<!-- Microsoft Edge / IE Pinned Site -->
<meta name="msapplication-TileColor" content="#00925a">
<meta name="msapplication-TileImage" content="/pwa-icons/icon-144.png?v=6">

<!-- ─── SERVICE WORKER REGISTRATION ─── -->
<script>
(function() {
  if (!('serviceWorker' in navigator)) return;
  // Register after page load to avoid blocking initial paint
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then(function(reg) {
        // Auto-update detection: show indicator when new SW is waiting
        reg.addEventListener('updatefound', function() {
          const newWorker = reg.installing;
          if (!newWorker) return;
          newWorker.addEventListener('statechange', function() {
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              // New version available — gently tell the SW to skip waiting on next reload
              // (Or expose an UI button: "Update available — refresh to use".)
              // For now, just log; users will get the new SW on their next navigation.
              console.log('[pwa] New service worker installed, will activate on next reload.');
            }
          });
        });
      })
      .catch(function(err) {
        console.warn('[pwa] SW registration failed:', err);
      });
  });
})();
</script></head>
<body>


<!-- SCROLL PROGRESS -->
<div class="scroll-progress" id="sp"></div>

<!-- ────────── NAV ────────── -->
<style>
  .as-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(7, 7, 16, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding-top: env(safe-area-inset-top, 0);
    padding-top: constant(safe-area-inset-top, 0);
  }
  .as-nav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: .85rem 1.25rem;
    padding-left:  max(1.25rem, env(safe-area-inset-left, 1.25rem));
    padding-right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .as-nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem; font-weight: 800;
    color: #fff; text-decoration: none; letter-spacing: -.5px;
  }
  .as-nav-logo span { color: #fbbf24; }
  .as-nav-ctx-label {
    display: inline-block; margin-left: .55rem;
    padding: .15rem .45rem;
    background: rgba(251,191,36,.12); color: #fbbf24;
    border: 1px solid rgba(251,191,36,.25); border-radius: 50px;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; vertical-align: middle;
  }
  .as-nav-ctx-label.admin    { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.25); }
  .as-nav-ctx-label.provider { background: rgba(6,182,212,.12); color: #06b6d4; border-color: rgba(6,182,212,.25); }
  .as-nav-actions { display: flex; align-items: center; gap: .6rem; }
  
  .as-burger {
    display: flex; flex-direction: column; gap: 5px;
    padding: .7rem; cursor: pointer;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    transition: background .2s, border-color .2s;
  }
  .as-burger:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
  .as-burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: all .25s; }
  .as-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
  .as-burger.open span:nth-child(2) { opacity: 0; }
  .as-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }
  
  .as-drawer-bg {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 198; opacity: 0; transition: opacity .25s;
  }
  .as-drawer-bg.open { display: block; opacity: 1; }
  
  .as-drawer {
    position: fixed; top: 0; right: -420px; bottom: 0;
    width: 380px; max-width: 90vw;
    background: linear-gradient(180deg, #15151f 0%, #0a0a0f 100%);
    border-left: 1px solid rgba(255,255,255,.08);
    z-index: 199;
    display: flex; flex-direction: column;
    transition: right .35s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .as-drawer.open { right: 0; }
  
  .as-drawer-x {
    position: absolute; top: 1rem; right: 1rem;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.05); border: none; border-radius: 8px;
    color: rgba(255,255,255,.7); cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s; z-index: 2;
  }
  .as-drawer-x:hover { background: rgba(255,255,255,.1); color: #fff; }
  
  .as-drawer-head { padding: 1.4rem 1.4rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .as-drawer-user { display: flex; align-items: center; gap: .85rem; }
  .as-drawer-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #1a1a1a; font-weight: 800; font-size: 1.15rem; flex-shrink: 0;
  }
  .as-drawer-user-info { flex: 1; min-width: 0; }
  .as-drawer-user-name {
    font-weight: 700; color: #fff; font-size: .95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .as-drawer-user-sub {
    font-size: .76rem; color: rgba(255,255,255,.5); margin-top: .15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  .as-drawer-body { padding: .6rem 0; flex: 1; }
  .as-drawer-section { padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .as-drawer-section:last-child { border-bottom: none; }
  .as-drawer-label {
    font-size: .7rem; color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
    padding: .65rem 1.4rem .35rem;
  }
  
  .as-drawer a, .as-drawer button.as-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem 1.4rem;
    font-size: .92rem; font-weight: 500;
    color: rgba(255,255,255,.8);
    background: none; border: none; cursor: pointer;
    text-decoration: none; text-align: left; width: 100%;
    transition: background .15s, color .15s, padding-left .15s;
    font-family: inherit;
  }
  .as-drawer a:hover, .as-drawer button.as-link:hover {
    background: rgba(251,191,36,.06);
    color: #fff; padding-left: 1.7rem;
  }
  .as-drawer a i, .as-drawer button.as-link i {
    width: 20px; text-align: center;
    color: rgba(255,255,255,.5); font-size: .95rem;
    transition: color .15s;
  }
  .as-drawer a:hover i, .as-drawer button.as-link:hover i { color: #fbbf24; }
  .as-drawer a.featured { color: #fbbf24; font-weight: 600; }
  .as-drawer a.featured i { color: #fbbf24; }
  .as-drawer a.logout { color: rgba(252,165,165,.7); }
  .as-drawer a.logout:hover { background: rgba(239,68,68,.06); color: #fca5a5; }
  .as-drawer a.logout i { color: rgba(252,165,165,.6); }
  .as-drawer a.logout:hover i { color: #fca5a5; }
  
  .as-drawer-langs { display: flex; gap: .45rem; padding: .65rem 1.4rem; }
  .as-drawer-lang-btn {
    flex: 1; padding: .55rem .65rem;
    border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    font-size: .8rem; font-weight: 600;
    text-decoration: none; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
  }
  .as-drawer-lang-btn:hover {
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.25);
    color: #fff;
  }
  .as-drawer-lang-btn.active {
    background: rgba(251,191,36,.15);
    border-color: rgba(251,191,36,.4);
    color: #fbbf24;
  }
  
  .as-drawer-ctas {
    padding: 1rem 1.4rem;
    display: flex; flex-direction: column; gap: .55rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .as-cta-btn {
    padding: .75rem 1rem; border-radius: 10px;
    font-weight: 600; font-size: .9rem;
    text-decoration: none; text-align: center;
    transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    border: none; cursor: pointer; font-family: inherit;
  }
  .as-cta-btn.primary {
    background: linear-gradient(135deg, #9333ea, #a855f7); color: #fff;
    box-shadow: 0 4px 14px rgba(168,85,247,.35);
  }
  .as-cta-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(168,85,247,.5); }
  .as-cta-btn.secondary {
    background: rgba(255,255,255,.05); color: #fff;
    border: 1px solid rgba(255,255,255,.1);
  }
  .as-cta-btn.secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
  
  .as-drawer-foot {
    padding: 1rem 1.4rem 1.4rem;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .72rem; color: rgba(255,255,255,.4);
    text-align: center; line-height: 1.5;
  }
  
  body.as-drawer-open { overflow: hidden; }
</style>

<nav class="as-nav">
  <div class="as-nav-inner">
    <a href="/home" class="as-nav-logo">
      Aussie<span>Start</span>
          </a>
    <div class="as-nav-actions">
            <button class="as-burger" id="asBurger" type="button" onclick="asToggleDrawer()" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>

<div class="as-drawer-bg" id="asDrawerBg" onclick="asCloseDrawer()"></div>

<div class="as-drawer" id="asDrawer" role="dialog" aria-label="Navigation">
  <button type="button" class="as-drawer-x" onclick="asCloseDrawer()" aria-label="Close">
    <i class="fas fa-xmark" style="pointer-events:none"></i>
  </button>
  
      <div class="as-drawer-head">
      <div style="font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:800;color:#fff">AussieStart</div>
      <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.2rem">
        Plan your working holiday      </div>
    </div>
    
    <div class="as-drawer-ctas">
      <a href="/register" class="as-cta-btn primary">
        <i class="fas fa-rocket"></i> Get started      </a>
      <a href="/login" class="as-cta-btn secondary">
        <i class="fas fa-right-to-bracket"></i> Login      </a>
    </div>
    
    <div class="as-drawer-body">
                  <div class="as-drawer-section">
              <div class="as-drawer-label">Learn more</div>
                              <a href="#how" class="">
                  <i class="fas fa-circle-info"></i>
                  How it works                </a>
                              <a href="#features" class="">
                  <i class="fas fa-sparkles"></i>
                  Features                </a>
                              <a href="#pricing" class="">
                  <i class="fas fa-tag"></i>
                  Pricing                </a>
                          </div>
                    <div class="as-drawer-section">
              <div class="as-drawer-label">Explore</div>
                              <a href="/jobs" class="">
                  <i class="fas fa-briefcase"></i>
                  Jobs                </a>
                              <a href="/accommodations" class="">
                  <i class="fas fa-house"></i>
                  Stays                </a>
                              <a href="/community" class="">
                  <i class="fas fa-users"></i>
                  Community                </a>
                          </div>
              
      <div class="as-drawer-section">
        <div class="as-drawer-label">Language</div>
        <div class="as-drawer-langs">
                      <a href="/home?lang=en"
               class="as-drawer-lang-btn active"
               data-no-close="1">
              <span style="font-size:1.1em">🇬🇧</span>
              <span>EN</span>
            </a>
                      <a href="/home?lang=de"
               class="as-drawer-lang-btn "
               data-no-close="1">
              <span style="font-size:1.1em">🇩🇪</span>
              <span>DE</span>
            </a>
                  </div>
      </div>
    </div>
    
  <div class="as-drawer-foot">
    AussieStart · Kiel, Germany · &copy; 2026  </div>
</div>

<script>
  function asToggleDrawer() {
    const d = document.getElementById('asDrawer');
    const b = document.getElementById('asBurger');
    const bg = document.getElementById('asDrawerBg');
    const open = d.classList.toggle('open');
    b.classList.toggle('open', open);
    bg.classList.toggle('open', open);
    document.body.classList.toggle('as-drawer-open', open);
  }
  function asCloseDrawer() {
    document.getElementById('asDrawer').classList.remove('open');
    document.getElementById('asBurger').classList.remove('open');
    document.getElementById('asDrawerBg').classList.remove('open');
    document.body.classList.remove('as-drawer-open');
  }
  document.querySelectorAll('#asDrawer a').forEach(el => {
    if (el.classList.contains('as-drawer-x')) return;
    if (el.dataset.noClose === '1') return;
    el.addEventListener('click', () => setTimeout(asCloseDrawer, 50));
  });
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && document.getElementById('asDrawer').classList.contains('open')) asCloseDrawer();
  });
</script>

<!-- ════════════════════════════════════════════════════ -->
<!-- HERO                                                   -->
<!-- ════════════════════════════════════════════════════ -->
<section class="hero">
  <div class="hero-bg">
    <div class="aurora a-1"></div>
    <div class="aurora a-2"></div>
    <div class="aurora a-3"></div>
    <div class="aurora a-4"></div>
    <div id="particles"></div>
    <div class="grain"></div>
  </div>
  <div class="wrap">
    <div class="hero-in">
      <div class="hero-tag fadeup"><span class="glob">🌍</span> Built for travelers — wherever you're going</div>
      <h1 class="fadeup fadeup-d1">
        Start your<br>
        <span class="rot-word">
          <span class="active grad">journey</span>
          <span class="grad">working holiday</span>
          <span class="grad">new chapter</span>
          <span class="grad">backpacker life</span>
          <span class="grad">new home abroad</span>
        </span><br>
        the smart way.      </h1>
      <p class="hero-sub fadeup fadeup-d2">Find jobs, accommodation, travel buddies, and a community of fellow travelers — in any country, in one place. From your first day abroad to permanent residency, we've got you covered.</p>
      <div class="hero-actions fadeup fadeup-d3">
        <a href="/register" class="btn btn-y btn-lg"><i class="fas fa-rocket"></i> Get started — free</a>
        <button onclick="openLogin()" class="btn btn-g btn-lg">I have an account</button>
      </div>
      <div class="hero-trust fadeup fadeup-d4">
        <div class="it"><i class="fas fa-shield-halved"></i> No setup fee</div>
        <div class="it"><i class="fas fa-bolt"></i> Cancel anytime</div>
        <div class="it"><i class="fas fa-lock"></i> GDPR-compliant</div>
        <div class="it"><i class="fas fa-language"></i> English & German support</div>
      </div>
    </div>
  </div>
</section>

<!-- COUNTRY MARQUEE -->
<section class="country-strip">
  <div class="marquee">
          <div class="it"><span class="flag">🇦🇺</span> Australia</div>
          <div class="it"><span class="flag">🇩🇪</span> Germany</div>
          <div class="it"><span class="flag">🇨🇦</span> Canada</div>
          <div class="it"><span class="flag">🇳🇿</span> New Zealand</div>
          <div class="it"><span class="flag">🇬🇧</span> United Kingdom</div>
          <div class="it"><span class="flag">🇮🇪</span> Ireland</div>
          <div class="it"><span class="flag">🇫🇷</span> France</div>
          <div class="it"><span class="flag">🇯🇵</span> Japan</div>
          <div class="it"><span class="flag">🇪🇸</span> Spain</div>
          <div class="it"><span class="flag">🇨🇭</span> Switzerland</div>
          <div class="it"><span class="flag">🇮🇹</span> Italy</div>
          <div class="it"><span class="flag">🇳🇱</span> Netherlands</div>
          <div class="it"><span class="flag">🇦🇹</span> Austria</div>
          <div class="it"><span class="flag">🇸🇪</span> Sweden</div>
          <div class="it"><span class="flag">🇺🇸</span> United States</div>
          <div class="it"><span class="flag">🇵🇹</span> Portugal</div>
        <!-- Duplicated for seamless loop -->
          <div class="it"><span class="flag">🇦🇺</span> Australia</div>
          <div class="it"><span class="flag">🇩🇪</span> Germany</div>
          <div class="it"><span class="flag">🇨🇦</span> Canada</div>
          <div class="it"><span class="flag">🇳🇿</span> New Zealand</div>
          <div class="it"><span class="flag">🇬🇧</span> United Kingdom</div>
          <div class="it"><span class="flag">🇮🇪</span> Ireland</div>
          <div class="it"><span class="flag">🇫🇷</span> France</div>
          <div class="it"><span class="flag">🇯🇵</span> Japan</div>
          <div class="it"><span class="flag">🇪🇸</span> Spain</div>
          <div class="it"><span class="flag">🇨🇭</span> Switzerland</div>
          <div class="it"><span class="flag">🇮🇹</span> Italy</div>
          <div class="it"><span class="flag">🇳🇱</span> Netherlands</div>
          <div class="it"><span class="flag">🇦🇹</span> Austria</div>
          <div class="it"><span class="flag">🇸🇪</span> Sweden</div>
          <div class="it"><span class="flag">🇺🇸</span> United States</div>
          <div class="it"><span class="flag">🇵🇹</span> Portugal</div>
      </div>
</section>

<!-- ─── SOCIAL COMPARISON: Live activity banner + Travelers carousel ─── -->
  <section style="padding:2rem 0;background:linear-gradient(180deg,var(--bg2),var(--bg))">
    <div style="max-width:1200px;margin:0 auto;padding:0 1rem">
              <div style="margin-bottom:1.25rem"><div style="padding:1.1rem 1.3rem;background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.05));border:1px solid rgba(16,185,129,.25);border-radius:13px"><div style="display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem"><i class="fas fa-users" style="color:#10b981;font-size:1.1rem"></i><span style="font-weight:700;font-size:.95rem;color:#fff">Active in the last 30 days:</span><span style="font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:800;color:#10b981">3</span><span style="color:var(--txd);font-size:.88rem">travelers</span><span style="color:var(--txd);font-size:.88rem">in <strong style="color:#fff">1</strong> countries</span></div><div style="display:flex;gap:.4rem;flex-wrap:wrap"><span style="display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;background:rgba(255,255,255,.06);border-radius:50px;font-size:.78rem;font-weight:600;color:#fff"><span style="font-size:.95rem">🇩🇪</span><span>1</span></span></div><style>@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}</style></div></div>
                </div>
  </section>

<!-- ─── TRENDING NOW ─── -->
<section class="trending-now-home">
  <div class="wrap">
    <div class="trending-hd fadeup">
      <h2>
        <i class="fas fa-fire" style="color:#f97316;animation:flicker 2s ease-in-out infinite"></i>
        Trending Now      </h2>
      <p>
        These places are being added to traveler routes most right now.      </p>
    </div>
    <div class="trending-row fadeup fadeup-d1">
              <div class="tcard">
          <a class="tcard-main" href="/accommodations?location=Kiel&country=DE"
             aria-label="Stays in Kiel">
                          <div class="tcard-img tcard-fallback"><i class="fas fa-map-marker-alt"></i></div>
                                      <div class="tcard-hot"><i class="fas fa-fire"></i> HOT</div>
                        <div class="tcard-body">
              <div class="tcard-city">Kiel</div>
              <div class="tcard-meta">
                <span><i class="fas fa-globe"></i> DE</span>
                <span class="tcard-adds"><i class="fas fa-arrow-trend-up"></i> +2 30d</span>
              </div>
            </div>
          </a>
          <div class="tcard-actions">
            <a href="/accommodations?location=Kiel&country=DE" class="tcard-btn primary">
              <i class="fas fa-house"></i> Stays            </a>
            <a href="/jobs?location=Kiel&country=DE" class="tcard-btn secondary">
              <i class="fas fa-briefcase"></i> Jobs            </a>
          </div>
        </div>
          </div>
    <div style="text-align:center;margin-top:1.4rem">
      <a href="/route-planner" style="color:var(--y);font-size:.92rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem">
        Plan your route        <i class="fas fa-arrow-right" style="font-size:.78rem"></i>
      </a>
    </div>
  </div>
</section>

<style>
.trending-now-home{padding:3.5rem 0;background:linear-gradient(180deg,var(--bg),var(--bg2));position:relative;overflow:hidden}
.trending-now-home::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.25),transparent)}
.trending-hd{text-align:center;margin-bottom:2rem}
.trending-hd h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,3.5vw,2rem);font-weight:800;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.7rem}
.trending-hd p{color:var(--txd);font-size:.95rem;max-width:580px;margin:0 auto;line-height:1.5}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}

.trending-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(max-width:640px){.trending-row{grid-template-columns:repeat(2,1fr);gap:.7rem}}

.tcard{position:relative;display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--bo);border-radius:14px;overflow:hidden;color:inherit;transition:all .25s var(--ease,cubic-bezier(.4,0,.2,1))}
.tcard:hover{transform:translateY(-4px);border-color:rgba(249,115,22,.5);box-shadow:0 12px 28px rgba(249,115,22,.15)}
.tcard-main{display:block;text-decoration:none;color:inherit;flex:1}
.tcard-img{height:130px;background-size:cover;background-position:center;background-color:#2a3138;position:relative}
@media(max-width:640px){.tcard-img{height:100px}}
.tcard-fallback{display:flex;align-items:center;justify-content:center;color:var(--txd);font-size:1.6rem}
.tcard-hot{position:absolute;top:.5rem;right:.5rem;background:linear-gradient(135deg,#f97316,#dc2626);color:#fff;padding:.18rem .5rem;border-radius:50px;font-size:.68rem;font-weight:800;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 12px rgba(249,115,22,.4)}
.tcard-body{padding:.75rem .85rem}
.tcard-city{font-weight:700;font-size:.95rem;color:#fff;margin-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard-meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--txd);gap:.4rem}
.tcard-meta i{margin-right:.25rem;font-size:.68rem}
.tcard-adds{color:#fb923c;font-weight:600}
.tcard-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bo);border-top:1px solid var(--bo)}
.tcard-btn{padding:.6rem .5rem;text-align:center;text-decoration:none;font-size:.78rem;font-weight:700;background:var(--bg3);color:var(--tx);transition:background .15s,color .15s}
.tcard-btn i{margin-right:.3rem;font-size:.76rem}
.tcard-btn.primary{color:#f97316}
.tcard-btn.secondary{color:#60a5fa}
.tcard-btn:hover{background:var(--bg4)}
</style>

<!-- ─── SPONSORED / FEATURED LISTINGS (only when logged in — guests can't view listings anyway) ─── -->

<!-- STATS -->
<section class="stats">
  <div class="wrap">
    <div class="stats-g">
      <div class="st fadeup"><div class="st-num" data-count="1">0</div><div class="st-lab">Active Jobs</div></div>
      <div class="st fadeup fadeup-d1"><div class="st-num" data-count="0">0</div><div class="st-lab">Stays Available</div></div>
      <div class="st fadeup fadeup-d2"><div class="st-num" data-count="216">0</div><div class="st-lab">Community Members</div></div>
      <div class="st fadeup fadeup-d3"><div class="st-num" data-count="0">0</div><div class="st-lab">Applications Sent</div></div>
    </div>
  </div>
</section>

<!-- USER PATHS -->
<section class="paths" id="paths">
  <div class="wrap">
    <div class="section-hd fadeup">
      <span class="section-tag">For everyone, everywhere</span>
      <h2>Whatever brings you here.</h2>
      <p>Three paths, one platform. Pick yours.</p>
    </div>
    <div class="path-grid">
      <div class="path fadeup">
        <div class="ico"><i class="fas fa-passport"></i></div>
        <h3>Work & Travel</h3>
        <p>Earn as you explore. Find casual, seasonal, and short-term jobs that fit around your travels.</p>
        <ul>
          <li><i class="fas fa-check"></i>Working holiday visa friendly</li>
          <li><i class="fas fa-check"></i>Flexible & seasonal listings</li>
          <li><i class="fas fa-check"></i>Short-stay accommodation</li>
        </ul>
      </div>
      <div class="path fadeup fadeup-d1">
        <div class="ico"><i class="fas fa-suitcase-rolling"></i></div>
        <h3>Move & Settle</h3>
        <p>Building a life in a new country? Long-term jobs, full apartments, and a community to lean on.</p>
        <ul>
          <li><i class="fas fa-check"></i>Full-time and skilled positions</li>
          <li><i class="fas fa-check"></i>Long-term rentals & flatshares</li>
          <li><i class="fas fa-check"></i>Verified hosts and employers</li>
        </ul>
      </div>
      <div class="path fadeup fadeup-d2">
        <div class="ico"><i class="fas fa-camera-retro"></i></div>
        <h3>Discover & Explore</h3>
        <p>Just visiting? Find unique stays and get to know locals through the community before you arrive.</p>
        <ul>
          <li><i class="fas fa-check"></i>Transparent service fee, no hidden costs</li>
          <li><i class="fas fa-check"></i>Unique stays & private rooms</li>
          <li><i class="fas fa-check"></i>Travel tips from members</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="how" id="how">
  <div class="wrap">
    <div class="section-hd fadeup">
      <span class="section-tag">Simple as 1, 2, 3</span>
      <h2>How AussieStart works.</h2>
      <p>Get started in minutes. No complicated forms.</p>
    </div>
    <div class="steps">
      <div class="step fadeup">
        <div class="num-circle">01</div>
        <h3>Create your profile</h3>
        <p>Sign up free. Add your skills, languages, and visa status. Upload your CV once — reuse it on every application.</p>
      </div>
      <div class="step fadeup fadeup-d1">
        <div class="num-circle">02</div>
        <h3>Browse and apply</h3>
        <p>Explore jobs and stays from anywhere in the world. Apply or book in one click. Save your favorite cover letters as templates.</p>
      </div>
      <div class="step fadeup fadeup-d2">
        <div class="num-circle">03</div>
        <h3>Connect & earn</h3>
        <p>Get hired, book your stay, and refer friends. Earn cash through our affiliate program when others sign up using your link.</p>
      </div>
    </div>
  </div>
</section>

<!-- FEATURES -->
<section class="feats" id="features">
  <div class="wrap">
    <div class="section-hd fadeup">
      <span class="section-tag">Built for the journey</span>
      <h2>Everything you need, in one place.</h2>
      <p>Real features that actually exist. No vaporware.</p>
    </div>
    <div class="fg">
      <div class="fc fadeup">
        <i class="fas fa-briefcase ic"></i>
        <h3>Jobs across the globe</h3>
        <p>From casual to seasonal to full-time — jobs everywhere from Sydney to Berlin to Tokyo. Filter by country, visa, and salary.</p>
      </div>
      <div class="fc fadeup fadeup-d1">
        <i class="fas fa-house ic"></i>
        <h3>Verified accommodations</h3>
        <p>Short-term rooms, long-term flats, and unique stays from hosts you can trust. Book directly — no booking platform fees.</p>
      </div>
      <div class="fc fadeup fadeup-d2">
        <i class="fas fa-users ic"></i>
        <h3>Global community</h3>
        <p>Connect with travelers and locals worldwide. Ask questions, share tips, find friends who've already made the journey.</p>
      </div>
      <div class="fc fadeup">
        <i class="fas fa-money-bill-trend-up ic"></i>
        <h3>Affiliate program</h3>
        <p>Refer friends, earn real money. Available to <strong>everyone</strong> — free or paid. Get paid via PayPal or platform balance.</p>
      </div>
      <div class="fc fadeup fadeup-d1">
        <i class="fas fa-file-arrow-up ic"></i>
        <h3>Reusable documents</h3>
        <p>Upload your CV, cover letter, and certificates once. Save them with custom labels and reuse on every application.</p>
      </div>
      <div class="fc fadeup fadeup-d2">
        <i class="fas fa-comment-dots ic"></i>
        <h3>Live chat support</h3>
        <p>Premium and Exclusive members get direct chat support whenever they need help. We're real humans, not bots.</p>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section class="test">
  <div class="wrap">
    <div class="section-hd fadeup">
      <span class="section-tag">Real stories</span>
      <h2>From travelers, for travelers.</h2>
      <p>What our members say about their journey.</p>
    </div>
    <div class="test-g">
          <div class="test-card fadeup">
      <div class="q-mark">&ldquo;</div>
      <div class="test-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
      <p class="test-text">AussieStart helped me find my dream job in Australia. The application tracker was pure gold!</p>
      <div class="test-author">
        <div class="test-avatar">EM</div>
        <div>
          <div class="test-name">Emma M.</div>
          <div class="test-role">🇦🇺 Backpacker</div>
        </div>
      </div>
    </div>
        <div class="test-card fadeup fadeup-d1">
      <div class="q-mark">&ldquo;</div>
      <div class="test-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
      <p class="test-text">Finally a platform that is not Australia-specific. Organized my Working Holiday in Canada perfectly.</p>
      <div class="test-author">
        <div class="test-avatar">MR</div>
        <div>
          <div class="test-name">Miguel R.</div>
          <div class="test-role">🇩🇪 Backpacker</div>
        </div>
      </div>
    </div>
        <div class="test-card fadeup fadeup-d2">
      <div class="q-mark">&ldquo;</div>
      <div class="test-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
      <p class="test-text">The community is amazing. Made friends from all over the world and got great tips for Japan.</p>
      <div class="test-author">
        <div class="test-avatar">SK</div>
        <div>
          <div class="test-name">Sarah K.</div>
          <div class="test-role">🇯🇵 Backpacker</div>
        </div>
      </div>
    </div>
        </div>
  </div>
</section>

<!-- PRICING -->
<section class="pricing" id="pricing">
  <div class="wrap">
    <div class="section-hd fadeup">
      <span class="section-tag">No surprises</span>
      <h2>Simple, fair pricing.</h2>
      <p>Pay-as-you-go, with optional subscriptions for power users. Cancel anytime.</p>
    </div>
    <div class="pg">
      <!-- FREE -->
      <div class="pc fadeup">
        <div class="pc-tier">Free</div>
        <div class="pc-amt"><span class="cur">€</span>0<span class="per">/forever</span></div>
        <p class="pc-tag">Get started without paying anything.</p>
        <ul class="pc-feats">
          <li><i class="fas fa-check"></i>Browse all jobs &amp; stays</li>
          <li><i class="fas fa-check"></i>Save unlimited listings</li>
          <li><i class="fas fa-check"></i>Community access</li>
          <li><i class="fas fa-check"></i>Affiliate program</li>
          <li><i class="fas fa-check"></i>Apply at <strong>€2.00</strong> each</li>
        </ul>
        <a href="/register" class="pc-btn">Sign up free</a>
      </div>

      <!-- MEMBERSHIP -->
      <div class="pc fadeup fadeup-d1">
        <div class="pc-tier">Membership</div>
        <div class="pc-amt"><span class="cur">€</span>4.99<span class="per">/month</span></div>
        <p class="pc-tag">For active job-seekers.</p>
        <ul class="pc-feats">
          <li><i class="fas fa-check"></i>Everything in Free</li>
          <li><i class="fas fa-check"></i>Apply at <strong>€1.00</strong> each</li>
          <li><i class="fas fa-check"></i>Inquire about stays at <strong>€1.00</strong></li>
        </ul>
        <a href="/register?tier=membership" class="pc-btn">Choose Membership</a>
      </div>

      <!-- PREMIUM -->
      <div class="pc popular fadeup fadeup-d2">
        <div class="pc-badge">Most Popular</div>
        <div class="pc-tier">Premium</div>
        <div class="pc-amt"><span class="cur">€</span>9.99<span class="per">/month</span></div>
        <p class="pc-tag">Best balance of cost and access.</p>
        <ul class="pc-feats">
          <li><i class="fas fa-check"></i>Everything in Membership</li>
          <li><i class="fas fa-check"></i>Apply at <strong>€0.50</strong> each</li>
          <li><i class="fas fa-check"></i>Inquire about stays at <strong>€0.50</strong></li>
          <li><i class="fas fa-check"></i>Live chat support</li>
        </ul>
        <a href="/register?tier=premium" class="pc-btn">Choose Premium</a>
      </div>

      <!-- EXCLUSIVE — corrected to €14.99 -->
      <div class="pc fadeup fadeup-d3">
        <div class="pc-tier">Exclusive</div>
        <div class="pc-amt"><span class="cur">€</span>14.99<span class="per">/month</span></div>
        <p class="pc-tag">For power users.</p>
        <ul class="pc-feats">
          <li><i class="fas fa-check"></i>Everything in Premium</li>
          <li><i class="fas fa-check"></i>Apply at <strong>€0.25</strong> each</li>
          <li><i class="fas fa-check"></i>Inquire about stays at <strong>€0.25</strong></li>
          <li><i class="fas fa-check"></i>Highest SocialVerse rate (15%)</li>
        </ul>
        <a href="/register?tier=exclusive" class="pc-btn">Choose Exclusive</a>
      </div>
    </div>
    <p class="pricing-note fadeup">All plans include the <strong>affiliate program</strong>, document reuse, and full community access.</p>
  </div>
</section>

<!-- CTA FINAL -->
<section class="ctaf">
  <div class="ctaf-bg"></div>
  <div class="ctaf-in">
    <h2 class="fadeup">Ready to begin your <span class="grad">journey</span>?</h2>
    <p class="fadeup fadeup-d1">Join travelers from over 50 countries building a better future. Sign up takes 30 seconds.</p>
    <div class="hero-actions fadeup fadeup-d2" style="justify-content:center;margin-bottom:0;">
      <a href="/register" class="btn btn-y btn-lg"><i class="fas fa-rocket"></i> Start free now</a>
      <button onclick="openLogin()" class="btn btn-g btn-lg">I have an account</button>
    </div>
  </div>
</section>


<!-- ────────── ACTIVE ANNOUNCEMENTS ────────── -->

<!-- ────────── FEATURED MONTHLY CHAMPIONS ────────── -->
<style>
.champ-section{padding:3rem 0;background:linear-gradient(180deg,rgba(255,205,0,.04),transparent)}
.champ-hd{text-align:center;margin-bottom:1.5rem}
.champ-hd .pill{display:inline-block;padding:.3rem .9rem;background:rgba(255,205,0,.1);color:var(--y);border:1px solid rgba(255,205,0,.3);border-radius:50px;font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.7rem}
.champ-hd h2{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:800;margin:0;color:#fff}
.champ-hd p{color:var(--txdd);font-size:.92rem;margin:.3rem 0 0}
.champ-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:.7rem;max-width:600px;margin:1.5rem auto 0;align-items:end}
.champ-card{background:var(--bg2,#11111c);border:1px solid var(--bo,rgba(255,255,255,.08));border-radius:14px;padding:1.1rem .7rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.champ-card.gold{background:linear-gradient(180deg,rgba(255,205,0,.18),rgba(255,205,0,.04));border-color:rgba(255,205,0,.4);transform:translateY(-12px);box-shadow:0 8px 24px rgba(255,205,0,.18)}
.champ-card.silver{background:linear-gradient(180deg,rgba(203,213,225,.14),rgba(203,213,225,.04));border-color:rgba(203,213,225,.35)}
.champ-card.bronze{background:linear-gradient(180deg,rgba(205,127,50,.16),rgba(205,127,50,.04));border-color:rgba(205,127,50,.35)}
.champ-card .medal{font-size:1.7rem;line-height:1}
.champ-card .nm{font-size:.88rem;font-weight:700;color:#fff;line-height:1.3}
.champ-card .xp{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--y,#FFCD00)}
.champ-card .xp small{font-size:.65rem;color:var(--txdd);font-weight:700;letter-spacing:1px;display:block;margin-top:.1rem}
.champ-cta{text-align:center;margin-top:1.6rem}
.champ-cta a{display:inline-flex;align-items:center;gap:.4rem;color:var(--y,#FFCD00);font-weight:700;font-size:.88rem;padding:.6rem 1.2rem;border:1px solid rgba(255,205,0,.3);border-radius:50px;transition:all .2s}
.champ-cta a:hover{background:rgba(255,205,0,.08)}
@media (max-width:640px){
  .champ-pod{grid-template-columns:1fr;gap:.5rem;max-width:340px}
  .champ-card.gold{transform:none;order:-1}
}
</style>
<section class="champ-section">
  <div class="wrap" style="max-width:900px;margin:0 auto;padding:0 1rem">
    <div class="champ-hd">
      <span class="pill">🏆 Hall of Fame</span>
      <h2>Top Travelers · May 2026</h2>
      <p>Last month's champions. Want to be next month's #1?</p>
    </div>
    <div class="champ-pod" style="grid-template-columns:repeat(2,1fr)">
            <div class="champ-card gold">
        <div class="medal">🥇</div>
        <img src="uploads/profile_images/profile_1_1776445885.JPEG" alt="Berkant Yazgan" style="width:54px;height:54px;border-radius:50%;object-fit:cover;display:inline-block;">        <div class="nm">Berkant</div>
        <div class="xp">464<small>XP</small></div>
      </div>
            <div class="champ-card silver">
        <div class="medal">🥈</div>
        <span style="display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:hsl(337,45%,38%);color:#fff;font-weight:700;font-size:23px;font-family:'Space Grotesk',sans-serif;line-height:1;flex-shrink:0;">BY</span>        <div class="nm">Berkant</div>
        <div class="xp">10<small>XP</small></div>
      </div>
          </div>
    <div class="champ-cta">
      <a href="/leaderboard">View full leaderboard <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>
</section>


<!-- ────────── FOOTER ────────── -->
<footer>
  <div class="wrap">
    <div class="foot-top">
      <div class="foot-brand">
        <div class="logo">Aussie<span>Start</span></div>
        <p class="desc">Jobs, accommodation, and community for international travelers, work-and-travelers, and immigrants — worldwide.</p>
        <div class="foot-social">
          <a href="https://instagram.com/aussiestart" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
          <a href="https://tiktok.com/@aussiestart" target="_blank" rel="noopener" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
        </div>
      </div>

      <div class="foot-col">
        <h4>Discover</h4>
        <ul>
          <li><a href="/jobs">Jobs</a></li>
          <li><a href="/accommodations">Stays</a></li>
          <li><a href="/community">Community</a></li>
          <li><a href="/competitions">Competitions</a></li>
          <li><a href="/socialverse">SocialVerse</a></li>
          <li><a href="/affiliate">Affiliate Program</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h4>Company</h4>
        <ul>
          <li><a href="/contact">Contact</a></li>
          <li><a href="/help">Help Center</a></li>
          <li><a href="/faq">FAQ</a></li>
          <li><a href="/imprint">Imprint</a></li>
          <li><a href="/widerruf" style="font-weight:700">Withdraw</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h4>Legal</h4>
        <ul>
          <li><a href="/terms">Terms of Service</a></li>
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/imprint">Imprint</a></li>
        </ul>
      </div>

      <div class="foot-news">
        <h4>Get inspired</h4>
        <p>New opportunities, travel tips, and member stories — once a month, no spam.</p>
        <form method="POST" id="nlForm" novalidate>
          <input type="email" name="newsletter_email" id="nlEmail" placeholder="your@email.com" required autocomplete="email">
          <button type="submit" id="nlSubmit" aria-label="Subscribe">
            <i class="fas fa-paper-plane" id="nlIcon"></i>
            <span class="nl-spinner" id="nlSpinner" aria-hidden="true"></span>
          </button>
        </form>
        <div class="nl-msg" id="nlMsg" role="status" aria-live="polite" hidden style="color:#86efac;"></div>
      </div>
    </div>

    <div class="foot-bot">
      <div class="left">
        <span>&copy; 2026 AussieStart</span>
        <span>&middot;</span>
        <span>Made for travelers, worldwide</span>
      </div>
      <div class="right">
        <a href="/imprint">Imprint</a>
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="/contact">Contact</a>
      </div>
    </div>
  </div>
</footer>

<!-- LOGIN MODAL -->
<div class="modal-bg" id="loginModal">
  <div class="modal">
    <button type="button" class="modal-x" onclick="closeLogin()" aria-label="Close"><i class="fas fa-xmark" style="pointer-events:none;"></i></button>
    <h3>Welcome back</h3>
    <p>Log in to your AussieStart account.</p>
        <form method="POST">
      <input type="hidden" name="login" value="1">
      <div class="fg-mod">
        <label>Email</label>
        <input type="email" name="email" class="fi-mod" required autofocus>
      </div>
      <div class="fg-mod">
        <label>Password</label>
        <div style="position:relative">
          <input type="password" name="password" id="pwHome" class="fi-mod" required style="padding-right:2.5rem">
          <button type="button" onclick="pwToggleHome('pwHome', this)" aria-label="Show password"
                  style="position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;cursor:pointer;padding:.3rem;font-size:1rem;z-index:2">
            <i class="far fa-eye"></i>
          </button>
        </div>
        <div style="margin-top:.45rem;text-align:right">
          <a href="/as_forgot-password.php" style="color:var(--p);font-size:.82rem;text-decoration:none;font-weight:600">Forgot password?</a>
        </div>
      </div>
      <label class="remember-home" style="display:flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--txdd);font-size:.85rem;margin-bottom:1rem">
        <input type="checkbox" name="remember" value="1" checked style="accent-color:var(--p);cursor:pointer;width:1rem;height:1rem">
        Stay logged in      </label>
      <button type="submit" class="btn btn-p"><i class="fas fa-right-to-bracket"></i> Login</button>
    </form>
    <div class="modal-foot">
      Don't have an account? <a href="/register">Sign up free</a>
    </div>
  </div>
</div>

<script>
function openLogin(){ var m = document.getElementById('loginModal'); if(m) m.classList.add('open'); }
function closeLogin(){ var m = document.getElementById('loginModal'); if(m) m.classList.remove('open'); }
function pwToggleHome(id, btn) {
  const inp = document.getElementById(id);
  const icon = btn.querySelector('i');
  if (inp.type === 'password') {
    inp.type = 'text';
    icon.className = 'far fa-eye-slash';
    btn.setAttribute('aria-label', 'Hide password');
  } else {
    inp.type = 'password';
    icon.className = 'far fa-eye';
    btn.setAttribute('aria-label', 'Show password');
  }
}

document.addEventListener('DOMContentLoaded', function(){
  // Modal backdrop close
  var m = document.getElementById('loginModal');
  if (m) m.addEventListener('click', function(e){ if (e.target === m) closeLogin(); });
  var d = document.getElementById('drawer');
  if (d) d.addEventListener('click', function(e){ if (e.target === d) d.classList.remove('open'); });
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') {
      if (m) m.classList.remove('open');
      if (d) d.classList.remove('open');
    }
  });

  // ── SCROLL PROGRESS BAR ──
  var sp = document.getElementById('sp');
  var topNav = document.getElementById('topNav');
  function onScroll(){
    var h = document.documentElement.scrollHeight - window.innerHeight;
    var p = h > 0 ? (window.scrollY / h) * 100 : 0;
    if (sp) sp.style.width = p + '%';
    if (topNav) topNav.classList.toggle('scrolled', window.scrollY > 24);
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  // ── SCROLL FADE-IN ──
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if (e.isIntersecting) { e.target.classList.add('v'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.fadeup').forEach(function(el){ io.observe(el); });

    // Counters
    var cIO = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if (!e.isIntersecting) return;
        var el = e.target;
        var target = parseInt(el.getAttribute('data-count'), 10) || 0;
        var dur = 1600;
        var start = performance.now();
        function tick(now) {
          var p = Math.min(1, (now - start) / dur);
          var eased = 1 - Math.pow(1 - p, 3);
          var v = Math.round(target * eased);
          el.textContent = v.toLocaleString() + '+';
          if (p < 1) requestAnimationFrame(tick);
          else el.textContent = target.toLocaleString() + '+';
        }
        requestAnimationFrame(tick);
        cIO.unobserve(el);
      });
    }, { threshold: 0.4 });
    document.querySelectorAll('[data-count]').forEach(function(el){ cIO.observe(el); });
  } else {
    document.querySelectorAll('.fadeup').forEach(function(el){ el.classList.add('v'); });
    document.querySelectorAll('[data-count]').forEach(function(el){
      var t = parseInt(el.getAttribute('data-count'), 10) || 0;
      el.textContent = t.toLocaleString() + '+';
    });
  }

  // ── ROTATING WORD ──
  var rotWords = document.querySelectorAll('.rot-word span');
  if (rotWords.length > 1) {
    var idx = 0;
    setInterval(function(){
      rotWords[idx].classList.remove('active');
      idx = (idx + 1) % rotWords.length;
      rotWords[idx].classList.add('active');
    }, 2400);
  }

  // ── 3D TILT + GLOW for feature cards ──
  document.querySelectorAll('.fc').forEach(function(card){
    var rect;
    card.addEventListener('mouseenter', function(){ rect = card.getBoundingClientRect(); });
    card.addEventListener('mousemove', function(e){
      if (!rect) rect = card.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      var cx = rect.width / 2, cy = rect.height / 2;
      var rx = ((y - cy) / cy) * -4;
      var ry = ((x - cx) / cx) * 4;
      card.style.transform = 'perspective(1000px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) translateZ(0)';
      card.style.setProperty('--mx', x + 'px');
      card.style.setProperty('--my', y + 'px');
    });
    card.addEventListener('mouseleave', function(){
      card.style.transform = '';
      rect = null;
    });
  });

  // ── PARTICLES ──
  var pContainer = document.getElementById('particles');
  if (pContainer && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    for (var i = 0; i < 18; i++) {
      var p = document.createElement('div');
      p.className = 'particle';
      p.style.left = (Math.random() * 100) + '%';
      p.style.animationDelay = (Math.random() * 14) + 's';
      p.style.animationDuration = (12 + Math.random() * 8) + 's';
      var size = 2 + Math.random() * 3;
      p.style.width = size + 'px';
      p.style.height = size + 'px';
      var hueChoice = Math.random();
      if (hueChoice < 0.33) { p.style.background = 'var(--y)'; p.style.boxShadow = '0 0 12px var(--y)'; }
      else if (hueChoice < 0.66) { p.style.background = 'var(--p)'; p.style.boxShadow = '0 0 12px var(--p)'; }
      else { p.style.background = 'var(--a1)'; p.style.boxShadow = '0 0 12px var(--a1)'; }
      pContainer.appendChild(p);
    }
  }

  // ── SMOOTH ANCHORS ──
  document.querySelectorAll('a[href^="#"]').forEach(function(a){
    a.addEventListener('click', function(e){
      var id = a.getAttribute('href');
      if (id.length < 2) return;
      var t = document.querySelector(id);
      if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    });
  });
});

</script>


<script>
(function(){
  var form = document.getElementById('nlForm');
  if (!form) return;
  var btn = document.getElementById('nlSubmit');
  var input = document.getElementById('nlEmail');
  var msg = document.getElementById('nlMsg');

  function showMsg(text, ok){
    msg.hidden = false;
    msg.textContent = text;
    msg.style.color = ok ? '#86efac' : '#fca5a5';
    input.classList.remove('is-success','is-error');
    input.classList.add(ok ? 'is-success' : 'is-error');
  }
  function clearStates(){
    btn.classList.remove('is-loading');
    btn.disabled = false;
  }

  form.addEventListener('submit', function(e){
    e.preventDefault();
    var email = (input.value || '').trim();
    if (!email) { showMsg('Please enter your email.', false); input.focus(); return; }

    btn.classList.add('is-loading');
    btn.disabled = true;
    msg.hidden = true;
    input.classList.remove('is-success','is-error');

    var fd = new FormData();
    fd.append('newsletter_email', email);
    fd.append('ajax', '1');

    fetch(window.location.pathname + window.location.search, {
      method: 'POST',
      body: fd,
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
      credentials: 'same-origin'
    })
    .then(function(r){ return r.json().catch(function(){ return { ok:false, message:'Unexpected response from server.' }; }); })
    .then(function(data){
      clearStates();
      var ok = !!(data && data.ok);
      showMsg((data && data.message) || (ok ? 'Subscribed.' : 'Something went wrong.'), ok);
      if (ok) {
        input.value = '';
        // auto-clear success styling after a few seconds (keeps message)
        setTimeout(function(){ input.classList.remove('is-success'); }, 4000);
      }
    })
    .catch(function(){
      clearStates();
      showMsg('Network error. Please try again.', false);
    });
  });
})();
</script>

</body>
</html>