@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Caveat:wght@700&display=swap");


@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Caveat:wght@700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{--navy:#1B2454;--teal:#2AADA8;--amber:#F5A623;--red:#E8453C;--green:#3DAA6E;--purple:#7B5EA7;--orange:#F07C3A;--text:#1a1a2e;--muted:#666;--border:#e8e8e8;--bg:#f8f9fc;}
body{font-family:"Nunito",sans-serif;background:#fff;color:var(--text);}
.screen{display:none;animation:fadeIn 0.2s ease;}
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.nav{background:#fff;border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:66px;position:sticky;top:0;z-index:200;}
.nav-logo{cursor:pointer;}
.nav-logo img{height:46px;width:auto;}
.nav-links{display:flex;gap:8px;align-items:center;}
.nav-links a{font-size:13px;font-weight:700;color:var(--text);text-decoration:none;cursor:pointer;padding:7px 14px;border-radius:22px;transition:all 0.15s;}
.nav-links a:not(.btn-teal):not(.btn-amber):hover{background:var(--bg);color:var(--navy);}
.nav-links a:hover,.nav-links a.active{color:var(--teal);}
.btn-teal{background:var(--teal);color:#fff!important;padding:8px 18px;border-radius:22px;font-size:13px;font-weight:800;}
.btn-amber{background:var(--amber);color:var(--navy)!important;padding:8px 18px;border-radius:22px;font-size:13px;font-weight:800;}

/* HERO */
.hero{background:#fff;padding:56px 28px 44px;text-align:center;position:relative;overflow:hidden;}
.blob{position:absolute;border-radius:50%;pointer-events:none;}
.hero h1{font-size:72px;font-weight:900;color:var(--navy);line-height:1.0;letter-spacing:-2px;margin-bottom:4px;}
.hero h1 em{color:var(--red);font-style:normal;display:block;}
.uline{width:80px;height:5px;background:var(--amber);border-radius:3px;margin:14px auto 20px;}
.hero-sub1{font-size:16px;color:#444;max-width:520px;margin:0 auto 8px;line-height:1.7;font-weight:600;}
.hero-sub2{font-size:15px;color:#555;max-width:540px;margin:0 auto 32px;line-height:1.75;font-weight:600;}

/* TILES */
.tiles-label{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700;}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:700px;margin:0 auto 36px;}
.tile{border:none;border-radius:18px;padding:20px 12px 16px;text-align:center;cursor:pointer;transition:all 0.18s;box-shadow:0 2px 12px rgba(0,0,0,0.15);}
.tile:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,0.22);}
.tile.t-green{background:linear-gradient(135deg,#3DAA6E,#2d8a56);}
.tile.t-teal{background:linear-gradient(135deg,#2AADA8,#1d8f8b);}
.tile.t-purple{background:linear-gradient(135deg,#7B5EA7,#614a8a);}
.tile.t-amber{background:linear-gradient(135deg,#F5A623,#e08c10);}
.tile-icon{font-size:28px;margin-bottom:8px;}
.tile-label{font-size:13px;font-weight:900;color:#fff;}
.tile-sub{font-size:11px;color:rgba(255,255,255,0.85);margin-top:3px;line-height:1.3;}

/* COMBINED HOW + SIGNUP */
.how-signup{background:var(--navy);padding:56px 28px;}
.hs-inner{max-width:720px;margin:0 auto;}
.hs-heading{font-size:28px;font-weight:900;color:#fff;text-align:center;margin-bottom:6px;}
.hs-sub{font-size:14px;color:rgba(255,255,255,0.6);text-align:center;margin-bottom:32px;font-weight:600;}
.hs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px;}
.hs-step{text-align:center;padding:18px 12px;background:rgba(255,255,255,0.07);border-radius:14px;border:1px solid rgba(255,255,255,0.1);}
.hs-step-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;margin:0 auto 10px;}
.sn1{background:var(--red);}
.sn2{background:var(--teal);}
.sn3{background:var(--amber);}
.hs-step h3{font-size:14px;font-weight:800;color:#fff;margin-bottom:5px;}
.hs-step p{font-size:11px;color:rgba(255,255,255,0.65);line-height:1.6;font-weight:600;}
.hs-divider{border:none;border-top:1px solid rgba(255,255,255,0.12);margin:0 0 28px;}
.hs-form-heading{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px;text-align:center;}
.hs-form-sub{font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:20px;font-weight:600;text-align:center;}
.su-form{display:flex;flex-direction:column;gap:10px;}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.su-form input,.su-form select{padding:13px 15px;border-radius:12px;border:2px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.15);color:#fff;font-family:"Nunito",sans-serif;font-size:14px;font-weight:700;}
.su-form input::placeholder{color:rgba(255,255,255,0.75);font-weight:600;}
.su-form select{color:rgba(255,255,255,0.75);}
.su-form select option{color:var(--text);background:#fff;}
.int-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);text-align:left;margin-bottom:6px;font-weight:700;}
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.int-tile{background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.28);border-radius:14px;padding:14px 6px;text-align:center;cursor:pointer;transition:all 0.15s;}
.int-tile:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.55);}
.int-tile.sel{background:rgba(42,173,168,0.4);border-color:var(--teal);}
.int-tile .ico{font-size:22px;margin-bottom:5px;}
.int-tile .lbl{font-size:12px;color:#fff;font-weight:800;}
.su-btn{background:var(--amber);color:var(--navy);border:none;padding:15px;border-radius:28px;font-family:"Nunito",sans-serif;font-size:16px;font-weight:900;cursor:pointer;margin-top:4px;}
.su-btn:hover{background:#fdb830;}
.honeypot{display:none!important;}
.success-msg{background:rgba(42,173,168,0.25);border:2px solid var(--teal);border-radius:12px;padding:16px;color:#fff;font-weight:800;font-size:14px;display:none;margin-top:8px;text-align:center;}
.err-msg{color:#FFB3AE;font-size:12px;font-weight:700;display:none;margin-top:-4px;}

/* SNIPPETS */
.snippet{padding:52px 28px;}
.snippet.alt{background:var(--bg);}
.sec-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);text-align:center;margin-bottom:6px;font-weight:800;}
.sec-h2{font-size:28px;font-weight:900;color:var(--navy);text-align:center;margin-bottom:4px;}
.sec-under{width:52px;height:4px;background:var(--amber);border-radius:2px;margin:10px auto 16px;}
.sec-sub{font-size:14px;color:var(--muted);text-align:center;max-width:480px;margin:0 auto 28px;line-height:1.65;font-weight:600;}
.see-all{text-align:center;margin-top:16px;}
.see-all a{font-size:14px;color:var(--teal);font-weight:800;text-decoration:none;cursor:pointer;}

/* GROUP BUY SNIPPET CARDS */
.gb-snip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:800px;margin:0 auto;align-items:stretch;}
.gbs{border-radius:18px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.gbs:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.1);}
.gbs-header{height:110px;display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;}
.gbs-badge{position:absolute;top:10px;left:10px;color:#fff;font-size:10px;font-weight:800;padding:3px 10px;border-radius:10px;}
.b-active{background:var(--red);}
.b-unlocked{background:var(--green);}
.gbs-body{background:#fff;padding:14px;}
.gbs-body h4{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.gbs-sup{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.gbs-bar-w{height:6px;background:#eee;border-radius:3px;margin-bottom:6px;}
.gbs-bar{height:6px;border-radius:3px;}
.gbs-meta{font-size:11px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:10px;}
.gbs-btn{display:block;width:100%;padding:9px;border-radius:16px;font-size:12px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;color:#fff;}
.gb-footer{background:var(--navy);padding:9px 14px;border-radius:0 0 16px 16px;}
.gb-footer a{display:block;font-size:11px;color:rgba(255,255,255,0.6);font-weight:600;cursor:pointer;margin-bottom:2px;}

/* CIRCLES SNIPPET */
.circ-snip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:800px;margin:0 auto;align-items:stretch;}
.cs{border-radius:18px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.cs:hover{transform:translateY(-3px);}
.cs-header{height:90px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;}
.cs-platform{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.9);color:var(--navy);font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;}
.cs-body{background:#fff;padding:13px;}
.cs-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;}
.cs-body h4{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.cs-loc{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:5px;}
.cs-body p{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:8px;font-weight:600;}
.cs-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:7px;border-top:1px solid var(--border);}
.cs-members{font-size:11px;font-weight:700;color:var(--muted);}
.cs-btn{padding:7px 13px;border-radius:14px;font-size:11px;font-weight:800;cursor:pointer;border:none;font-family:"Nunito",sans-serif;color:#fff;}

/* SWAP SNIPPET */
.swap-snip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:800px;margin:0 auto;align-items:stretch;}
.ss{border-radius:16px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.ss:hover{transform:translateY(-2px);}
.ss-head{padding:12px 13px 8px;background:#fff;display:flex;align-items:center;gap:9px;}
.ss-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;flex-shrink:0;}
.ss-name{font-size:13px;font-weight:800;color:var(--navy);}
.ss-loc{font-size:10px;color:var(--muted);font-weight:600;}
.ss-badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;margin-left:auto;flex-shrink:0;}
.ss-offering{background:rgba(42,173,168,0.12);color:var(--teal);}
.ss-asking{background:rgba(232,69,60,0.1);color:var(--red);}
.ss-free{background:rgba(61,170,110,0.12);color:var(--green);}
.ss-body{padding:0 13px 12px;background:#fff;}
.ss-title{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.ss-desc{font-size:11px;color:var(--muted);font-weight:600;line-height:1.5;margin-bottom:6px;}
.ss-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px;}
.ss-tag{font-size:10px;background:var(--bg);color:var(--muted);padding:2px 6px;border-radius:6px;font-weight:700;border:1px solid var(--border);}
.ss-return{font-size:11px;color:var(--navy);font-weight:700;padding:5px 9px;background:var(--bg);border-radius:7px;border-left:3px solid var(--border);}
.ss-footer{padding:9px 13px;border-top:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;}
.ss-meta{font-size:10px;color:var(--muted);font-weight:600;}
.ss-connect{background:var(--teal);color:#fff;border:none;padding:6px 14px;border-radius:12px;font-size:11px;font-weight:800;cursor:pointer;font-family:"Nunito",sans-serif;}

/* PAGE HERO */
.page-hero{background:var(--navy);padding:52px 28px;text-align:center;position:relative;overflow:hidden;}
.ph-blob{position:absolute;border-radius:50%;opacity:0.09;pointer-events:none;}
.eyebrow{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;font-weight:800;}
.page-hero h1{font-size:38px;font-weight:900;color:#fff;margin-bottom:4px;line-height:1.05;}
.page-hero h1 em{color:var(--amber);font-style:normal;}
.ph-under{width:56px;height:4px;background:var(--amber);border-radius:2px;margin:10px auto 18px;}
.page-hero p{font-size:14px;color:rgba(255,255,255,0.65);max-width:480px;margin:0 auto 22px;line-height:1.7;font-weight:600;}
.ph-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cta-primary{background:var(--amber);color:var(--navy);padding:13px 28px;border-radius:26px;font-size:14px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;}
.cta-teal{background:var(--teal);color:#fff;padding:13px 28px;border-radius:26px;font-size:14px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;}
.cta-navy{background:var(--navy);color:#fff;padding:13px 28px;border-radius:26px;font-size:14px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;}
.cta-secondary{background:transparent;color:var(--navy);padding:12px 26px;border-radius:26px;font-size:14px;font-weight:800;cursor:pointer;border:2.5px solid var(--navy);font-family:"Nunito",sans-serif;}
.cta-outline-white{background:transparent;color:#fff;padding:12px 24px;border-radius:24px;font-size:13px;font-weight:800;cursor:pointer;border:2px solid rgba(255,255,255,0.4);font-family:"Nunito",sans-serif;}

/* FILTER BAR */
.filter-bar{background:#fff;border-bottom:1px solid var(--border);padding:13px 20px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;}
.search-input{padding:8px 14px 8px 32px;border:1.5px solid var(--border);border-radius:20px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;width:190px;}
.suburb-sel{padding:7px 11px;border:1.5px solid var(--border);border-radius:20px;font-family:"Nunito",sans-serif;font-size:12px;font-weight:700;color:var(--text);}
.fpill{font-size:12px;font-weight:700;padding:6px 13px;border-radius:16px;border:1.5px solid var(--border);background:#fff;cursor:pointer;color:var(--muted);transition:all 0.15s;}
.fpill:hover{border-color:var(--teal);color:var(--teal);}
.fpill.active{background:var(--teal);color:#fff;border-color:var(--teal);}

/* GRIDS */
.grid-sec{padding:26px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:820px;margin:0 auto 18px;align-items:stretch;}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:820px;margin:0 auto 18px;align-items:stretch;}

/* SUPPLIER CARD */
.sup-card{border-radius:18px;overflow:hidden;border:2px solid var(--border);display:flex;flex-direction:column;transition:transform 0.15s;}
.sup-card:hover{transform:translateY(-3px);}
.sup-header{height:130px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;flex-shrink:0;}
.sup-badge{position:absolute;top:10px;left:10px;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:800;color:#fff;}
.sup-badge-active{background:var(--red);}
.sup-badge-unlocked{background:var(--green);}
.sup-badge-coming{background:var(--amber);color:var(--navy);}
.sup-badge-partner{background:var(--teal);}
.sup-body{background:#fff;padding:15px;flex:1;display:flex;flex-direction:column;}
.sup-body h4{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.sup-loc{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:5px;}
.sup-body p{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:9px;font-weight:600;}
.sup-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.sup-tag{font-size:10px;background:var(--bg);color:var(--muted);padding:2px 7px;border-radius:7px;font-weight:700;border:1px solid var(--border);}
.cooee-box{background:#fff8f0;border:1.5px solid rgba(245,166,35,0.35);border-radius:12px;padding:11px;margin-top:auto;}
.cooee-box.ulb{background:rgba(61,170,110,0.04);border-color:rgba(61,170,110,0.3);}
.cb-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--amber);margin-bottom:3px;}
.cb-label.ul{color:var(--green);}
.cb-h{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.cb-desc{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:7px;}
.cb-bar-w{height:6px;background:rgba(0,0,0,0.08);border-radius:3px;margin-bottom:5px;}
.cb-bar{height:6px;border-radius:3px;}
.cb-meta{font-size:11px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:9px;}
.jb-red{background:var(--red);color:#fff;display:block;width:100%;padding:9px;border-radius:18px;font-size:12px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;text-align:center;}
.jb-teal{background:var(--teal);color:#fff;display:block;width:100%;padding:9px;border-radius:18px;font-size:12px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;text-align:center;}
.jb-navy{background:var(--navy);color:#fff;display:block;width:100%;padding:9px;border-radius:18px;font-size:12px;font-weight:900;cursor:pointer;border:none;font-family:"Nunito",sans-serif;text-align:center;}
.sup-footer{background:var(--navy);padding:9px 13px;border-radius:0 0 16px 16px;}
.sup-footer a{display:block;font-size:11px;color:rgba(255,255,255,0.6);font-weight:600;cursor:pointer;margin-bottom:2px;text-decoration:none;}

/* CIRCLE CARDS (full page) */
.ccard{border-radius:18px;overflow:hidden;border:1px solid var(--border);display:flex;flex-direction:column;transition:transform 0.15s;cursor:pointer;}
.ccard:hover{transform:translateY(-3px);}
.ccard-header{height:98px;display:flex;align-items:center;justify-content:center;font-size:38px;position:relative;flex-shrink:0;}
.ccard-platform{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.92);color:var(--navy);font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;}
.ccard-body{background:#fff;padding:13px;flex:1;display:flex;flex-direction:column;}
.ccard-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:3px;}
.ccard h4{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.ccard-loc{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.ccard p{font-size:11px;color:var(--muted);line-height:1.5;font-weight:600;flex:1;margin-bottom:7px;}
.ccard-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:7px;border-top:1px solid var(--border);margin-top:auto;}
.ccard-members{font-size:11px;font-weight:700;color:var(--muted);}
.ccard-btn{padding:7px 13px;border-radius:14px;font-size:11px;font-weight:800;cursor:pointer;border:none;font-family:"Nunito",sans-serif;color:#fff;}

/* SWAP PAGE CARDS */
.swcard{border-radius:16px;overflow:hidden;border:1px solid var(--border);transition:transform 0.15s;cursor:pointer;display:flex;flex-direction:column;}
.swcard:hover{transform:translateY(-2px);}
.swcard-header{padding:13px 13px 8px;display:flex;align-items:center;gap:9px;background:#fff;}
.sw-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;flex-shrink:0;}
.sw-nm{font-size:13px;font-weight:800;color:var(--navy);}
.sw-lc{font-size:10px;color:var(--muted);font-weight:600;}
.sw-badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;margin-left:auto;flex-shrink:0;}
.sw-offering{background:rgba(42,173,168,0.12);color:var(--teal);}
.sw-asking{background:rgba(232,69,60,0.1);color:var(--red);}
.sw-free{background:rgba(61,170,110,0.12);color:var(--green);}
.sw-learn{background:rgba(123,94,167,0.12);color:var(--purple);}
.swcard-body{padding:0 13px 13px;background:#fff;flex:1;}
.sw-ttl{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.sw-desc{font-size:11px;color:var(--muted);font-weight:600;line-height:1.5;margin-bottom:7px;}
.sw-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px;}
.sw-tag{font-size:10px;background:var(--bg);color:var(--muted);padding:2px 6px;border-radius:6px;font-weight:700;border:1px solid var(--border);}
.sw-ret{font-size:11px;color:var(--navy);font-weight:700;padding:5px 9px;background:var(--bg);border-radius:7px;border-left:3px solid var(--border);}
.swcard-footer{padding:9px 13px;border-top:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.sw-mt{font-size:10px;color:var(--muted);font-weight:600;}
.sw-conn{background:var(--teal);color:#fff;border:none;padding:6px 14px;border-radius:12px;font-size:11px;font-weight:800;cursor:pointer;font-family:"Nunito",sans-serif;}

/* LIST SKILL */
.lskill-sec{background:var(--bg);padding:36px 28px;}
.lsk-inner{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;}
.lsk-inner h3{font-size:18px;font-weight:900;color:var(--navy);margin-bottom:3px;}
.lsk-sub{font-size:12px;color:var(--muted);margin-bottom:16px;font-weight:600;line-height:1.5;}
.lsf{display:flex;flex-direction:column;gap:9px;}
.lsf input,.lsf select,.lsf textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:11px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:600;color:var(--text);}
.lsf input::placeholder{color:#aaa;}
.lsf textarea{resize:vertical;min-height:68px;}
.lsf-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.lsf-btn{background:var(--teal);color:#fff;border:none;padding:13px;border-radius:24px;font-family:"Nunito",sans-serif;font-size:14px;font-weight:900;cursor:pointer;}
.lsf-note{font-size:11px;color:var(--muted);font-weight:600;text-align:center;}

/* SUPPLIERS PAGE */
.sup-how{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;max-width:800px;margin:0 auto 30px;}
.shi{background:var(--bg);border-radius:14px;padding:18px;text-align:center;}
.shi-ico{font-size:26px;margin-bottom:9px;}
.shi-h{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:5px;}
.shi-p{font-size:11px;color:var(--muted);font-weight:600;line-height:1.5;}

/* PROFILE */
.profile-hero{background:var(--navy);padding:30px 24px;text-align:center;}
.p-avatar{width:70px;height:70px;border-radius:50%;background:var(--teal);color:#fff;font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;border:3px solid rgba(255,255,255,0.3);}
.p-name{font-size:21px;font-weight:900;color:#fff;margin-bottom:3px;}
.p-suburb{font-size:13px;color:rgba(255,255,255,0.5);font-weight:600;}
.ptabs{display:flex;border-bottom:2px solid var(--border);background:#fff;overflow-x:auto;}
.ptab{padding:11px 16px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;}
.ptab.active{color:var(--navy);border-bottom-color:var(--teal);}
.ptab-c{display:none;padding:20px;max-width:620px;margin:0 auto;}
.ptab-c.active{display:block;}
.match-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:11px;}
.m-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;flex-shrink:0;}
.m-info{flex:1;}
.m-info h4{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:3px;}
.m-info p{font-size:11px;color:var(--muted);font-weight:600;line-height:1.5;}
.o-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;margin:2px;background:rgba(42,173,168,0.12);color:var(--teal);}
.n-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;margin:2px;background:rgba(232,69,60,0.1);color:var(--red);}
.mwhy{font-size:10px;font-weight:800;padding:2px 9px;border-radius:8px;background:rgba(245,166,35,0.15);color:#856404;margin-top:5px;display:inline-block;}
.m-btn{background:var(--teal);color:#fff;border:none;padding:7px 14px;border-radius:14px;font-size:11px;font-weight:800;cursor:pointer;font-family:"Nunito",sans-serif;flex-shrink:0;align-self:center;}
.mc-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:13px;margin-bottom:9px;}
.mc-card h4{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.mc-card p{font-size:11px;color:var(--muted);font-weight:600;}
.s-live{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;background:#D4EDDA;color:#155724;margin-top:5px;}
.s-pend{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;background:#FEF3CD;color:#856404;margin-top:5px;}
.notif-item{display:flex;gap:11px;padding:11px;border-radius:11px;background:var(--bg);margin-bottom:7px;}
.n-ico{font-size:20px;flex-shrink:0;}
.n-body h4{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.n-body p{font-size:11px;color:var(--muted);font-weight:600;}
.edit-box{background:var(--bg);border-radius:13px;padding:14px;margin-bottom:12px;}
.edit-box h4{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:10px;}
.ef{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.ef label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
.ef input,.ef select{padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:600;color:var(--text);}
.ef-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.save-btn{background:var(--teal);color:#fff;border:none;padding:9px 22px;border-radius:18px;font-size:13px;font-weight:800;cursor:pointer;font-family:"Nunito",sans-serif;}

/* LOGIN */
.login-page{background:var(--bg);min-height:480px;padding:44px 24px;}
.login-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;max-width:360px;margin:0 auto;}
.login-logo{text-align:center;margin-bottom:6px;}
.login-logo img{height:50px;}
.login-tagline{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:22px;}
.lf{display:flex;flex-direction:column;gap:9px;}
.lf input{padding:11px 13px;border:1.5px solid var(--border);border-radius:11px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:600;color:var(--text);}
.lf input::placeholder{color:#aaa;}
.lf-primary{background:var(--navy);color:#fff;border:none;padding:12px;border-radius:24px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:900;cursor:pointer;}
.lf-div{text-align:center;font-size:12px;color:var(--muted);font-weight:600;}
.lf-teal{background:var(--teal);color:#fff;border:none;padding:12px;border-radius:24px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:900;cursor:pointer;}
.lf-back{text-align:center;font-size:12px;color:var(--teal);font-weight:700;cursor:pointer;margin-top:3px;}

/* MODAL */
.modal-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:500;display:none;align-items:center;justify-content:center;}
.modal-ov.open{display:flex;}
.modal{background:#fff;border-radius:20px;padding:24px;max-width:410px;width:93%;position:relative;max-height:90vh;overflow-y:auto;}
.modal h3{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:3px;}
.msub{font-size:12px;color:var(--muted);margin-bottom:14px;font-weight:600;}
.modal-x{position:absolute;top:13px;right:15px;font-size:19px;cursor:pointer;color:var(--muted);background:none;border:none;font-family:"Nunito",sans-serif;}
.mf{display:flex;flex-direction:column;gap:8px;}
.mf input,.mf select,.mf textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:600;color:var(--text);}
.mf input::placeholder,.mf textarea::placeholder{color:#aaa;}
.mf textarea{resize:vertical;min-height:65px;}
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mf-btn{background:var(--amber);color:var(--navy);border:none;padding:11px;border-radius:22px;font-family:"Nunito",sans-serif;font-size:13px;font-weight:900;cursor:pointer;}
.mf-note{font-size:11px;color:var(--muted);font-weight:600;text-align:center;}
.mf-err{color:var(--red);font-size:12px;font-weight:700;display:none;}

/* FOOTER */
.footer{background:var(--navy);padding:30px 26px;}
.fi{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;max-width:780px;margin:0 auto;}
.f-logo img{height:34px;}
.f-tag{font-size:11px;color:rgba(255,255,255,0.32);margin-top:3px;font-weight:600;}
.f-col a{display:block;font-size:12px;color:rgba(255,255,255,0.48);text-decoration:none;margin-bottom:4px;font-weight:600;cursor:pointer;}
.f-col a:hover{color:#fff;}
.f-copy{font-size:10px;color:rgba(255,255,255,0.18);text-align:center;margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,0.07);font-weight:600;}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  /* NAV */
  .nav { padding: 0 14px; height: 54px; }
  .nav-logo img { height: 36px; }
  .nav-links { gap: 8px; }
  .nav-links a:not(.btn-teal):not(.btn-amber) { display: none; }
  .btn-teal { padding: 7px 12px; font-size: 12px; }
  .btn-amber { padding: 7px 12px; font-size: 12px; }

  /* HERO */
  .hero { padding: 36px 16px 28px; }
  .hero h1 { font-size: 42px; letter-spacing: -1px; }

  /* TILES */
  .tiles { grid-template-columns: repeat(2,1fr); gap: 10px; max-width: 100%; }
  .tile { padding: 16px 10px 12px; }
  .tile-icon { font-size: 24px; }
  .tile-label { font-size: 12px; }
  .tile-sub { font-size: 10px; }

  /* HOW-SIGNUP */
  .how-signup { padding: 36px 16px; }
  .hs-steps { grid-template-columns: 1fr; gap: 10px; }
  .su-row { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(2,1fr); }

  /* SNIPPETS */
  .snippet { padding: 36px 16px; }
  .gb-snip { grid-template-columns: 1fr; }
  .circ-snip { grid-template-columns: 1fr; }
  .swap-snip { grid-template-columns: 1fr; }

  /* GRIDS */
  .g3 { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .grid-sec { padding: 16px; }

  /* PAGE HERO */
  .page-hero { padding: 36px 16px; }
  .page-hero h1 { font-size: 28px; }
  .ph-btns { flex-direction: column; align-items: center; }
  .cta-primary, .cta-teal, .cta-navy, .cta-outline-white { width: 100%; text-align: center; }

  /* FILTER BAR */
  .filter-bar { padding: 10px 14px; gap: 6px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .search-input { width: 140px; font-size: 12px; }
  .fpill { white-space: nowrap; font-size: 11px; padding: 5px 10px; }

  /* CIRCLES PAGE HERO */
  .circles-hero h1 { font-size: 38px; }

  /* SWAP PAGE */
  .lsf-row { grid-template-columns: 1fr; }

  /* PROFILE */
  .ptabs { font-size: 11px; }
  .ptab { padding: 10px 12px; font-size: 11px; }
  .match-card { flex-direction: column; gap: 10px; }
  .m-btn { width: 100%; }
  .ef-row { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(2,1fr); }

  /* SUP HOW */
  .sup-how { grid-template-columns: repeat(2,1fr); }

  /* MODAL */
  .modal { padding: 20px; border-radius: 16px; }
  .mf-row { grid-template-columns: 1fr; }

  /* FOOTER */
  .fi { flex-direction: column; gap: 20px; }

  /* LOGIN */
  .login-page { padding: 24px 16px; }

  /* GENERAL */
  .sec-h2 { font-size: 22px; }
  .hero-sub1, .hero-sub2 { font-size: 14px; }
  .hs-heading { font-size: 22px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 34px; }
  .tiles { grid-template-columns: repeat(2,1fr); }
  .sup-how { grid-template-columns: 1fr; }
  .nav-links .btn-teal { display: none; }
}

.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 4px 0; border-radius: 2px; }
.mobile-menu { display: none; position: fixed; top: 54px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 16px 20px; z-index: 199; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; font-size: 15px; font-weight: 700; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; }
.mobile-menu a:last-child { border-bottom: none; }
@media (max-width: 768px) {
  .nav-hamburger { display: block; }
}

/* Footer logo - no white box */
.footer .f-logo img { height:38px; filter:brightness(0) invert(1); opacity:0.9; }
/* Nav logo stays full colour */
.nav .nav-logo img { height:46px; filter:none; }