:root{--bg:#0d1830;--surface:#121e3c;--card:#182648;--accent:#4e7aaa;--accent2:#4e7aaa;--warm:#8ab2cc;--warm2:#aacce0;--teal:#8ab2cc;--text:#dce8f5;--text-dim:#a8c4e0;--muted:#6888a8;--border:#1e3460;--border-h:#4e7aaa;--border2:#263e70;--glow:0 0 0 1px rgba(78,122,170,.28),0 8px 32px rgba(78,122,170,.12);--radius:12px;--radius-sm:8px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
input,textarea,select{user-select:text!important;-webkit-user-select:text!important}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:'Raleway',sans-serif;font-weight:400;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}html{overflow-x:hidden}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:700;line-height:1.2;color:var(--text)}
p{line-height:1.78;color:var(--text-dim)}

/* ─── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(78,122,170,.3);border-radius:99px}

/* ─── NAV ─────────────────────────────────────────────── */
.nav-wrap{position:relative!important;z-index:999!important;display:flex;justify-content:center;padding:10px 1.5rem;pointer-events:none}
.nav-inner{pointer-events:auto;display:flex;align-items:center;height:80px;padding:0 1.8rem;background:rgba(13,24,48,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:none;border-radius:100px;box-shadow:0 0 0 1px var(--border2),0 2px 28px rgba(0,0,0,.45);gap:1.4rem;width:100%;max-width:1400px;transition:height .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .35s ease}
.logo-wrap{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.logo-mark{width:52px;height:52px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 8px rgba(78,122,170,.4));transition:transform .45s cubic-bezier(.16,1,.3,1)}
.logo-wrap:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.logo-name{font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:700;letter-spacing:.005em;color:var(--text);line-height:1}
.logo-name .dim{color:var(--warm)}
.logo-name .edu-tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:rgba(78,122,170,.15);border:1px solid rgba(78,122,170,.3);border-radius:5px;padding:.12rem .4rem;margin-left:.35rem;vertical-align:middle;font-family:'Raleway',sans-serif}
.nav-site-chips{display:flex;align-items:center;gap:.45rem;margin-right:auto;flex-shrink:0}
.nav-back-btn{display:inline-flex;align-items:center;background:var(--warm);color:#0d1830;font-family:'Raleway',sans-serif;font-size:.88rem;font-weight:700;padding:.5rem 1.4rem;border-radius:100px;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s;flex-shrink:0}
.nav-back-btn:hover{background:var(--warm2)}
.nav-chip-edu,.nav-chip-portal{background:transparent;color:var(--text-dim);border:1px solid var(--border2);font-weight:600}
.nav-chip-edu:hover,.nav-chip-portal:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--accent)}
.nav-links{display:flex!important;gap:.2rem;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-family:'Raleway',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:.04em;padding:.45rem .95rem;border-radius:100px;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a::after{content:'';position:absolute;left:.95rem;right:.95rem;bottom:.22rem;height:1.5px;background:var(--warm);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.16,1,.3,1);border-radius:2px}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s;flex-shrink:0}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* nav animations */
.wg-nav-in{animation:wgNavIn .9s cubic-bezier(.16,1,.3,1) both}
@keyframes wgNavIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.wg-nav-scrolled{height:64px!important;box-shadow:0 12px 42px rgba(0,0,0,.55)!important}
.wg-motion .logo-mark{animation:wgLogoGlow 4.5s ease-in-out infinite}
@keyframes wgLogoGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(78,122,170,.4))}50%{filter:drop-shadow(0 0 16px rgba(138,178,204,.75))}}
/* responsive */
@media(max-width:960px){
.nav-inner{position:relative}
.nav-hamburger{display:flex!important}
.nav-chip-edu,.nav-chip-portal{display:none!important}
.nav-links{display:none!important;position:absolute;top:calc(100% + 10px);left:-1.8rem;right:-1.8rem;background:#0d1830;border:1px solid var(--border2);border-radius:16px;flex-direction:column!important;padding:.75rem;gap:.15rem!important;flex-wrap:nowrap!important;z-index:100;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.nav-links.open{display:flex!important}
.nav-links a{padding:.75rem 1rem!important;border-radius:10px!important;font-size:.95rem!important;white-space:normal!important;display:block!important;text-align:left!important}
.nav-links a::after{display:none}
}

/* ─── HERO ─────────────────────────────────────────────── */
.hero{padding:5rem 1.5rem 4rem;text-align:center}
.hero-inner{max-width:800px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(138,178,204,.08);border:1px solid rgba(138,178,204,.22);color:var(--teal);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.38rem 1rem;border-radius:20px;margin-bottom:1.75rem}
.badge-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:pulse 2s ease-in-out infinite}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.3rem,5.5vw,3.7rem);font-weight:700;line-height:1.1;letter-spacing:-.025em;margin-bottom:1.2rem}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero-sub{font-size:1rem;color:var(--muted);line-height:1.85;max-width:580px;margin:0 auto 2.5rem}
.hero-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:.45rem;background:var(--warm);color:#0d1830;padding:.75rem 1.85rem;border-radius:4px;font-family:'Raleway',sans-serif;font-size:.875rem;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:background .18s,transform .15s;box-shadow:0 4px 18px rgba(138,178,204,.2)}
.btn-primary:hover{background:var(--warm2);transform:translateY(-2px)}
.btn-secondary{display:inline-flex;align-items:center;gap:.45rem;background:rgba(78,122,170,.1);color:var(--text);padding:.75rem 1.85rem;border-radius:10px;font-family:'Raleway',sans-serif;font-size:.875rem;font-weight:600;text-decoration:none;border:1px solid var(--border);transition:all .18s}
.btn-secondary:hover{background:rgba(78,122,170,.18);border-color:var(--border-h);transform:translateY(-2px)}

/* ─── SECTION ─────────────────────────────────────────── */
.section{padding:4rem 1.5rem}
.section-inner{max-width:1200px;margin:0 auto}
.section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.75rem}
.section h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:1rem}
.section h2 em{color:var(--teal);font-style:italic}
.section-sub{color:var(--muted);max-width:560px;margin-bottom:2.5rem;font-size:.93rem;line-height:1.8}

/* ─── CARD GRID ────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.15rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.65rem;transition:border-color .22s,box-shadow .22s,transform .22s;text-decoration:none;display:flex;flex-direction:column;gap:.65rem}
.card:hover{border-color:var(--border-h);box-shadow:var(--glow);transform:translateY(-3px)}
.card-icon{font-size:1.6rem;line-height:1}
.card h3{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--text)}
.card p{font-size:.85rem;color:var(--muted);line-height:1.7;flex:1}
.card-arrow{font-size:.8rem;font-weight:600;color:var(--warm);margin-top:auto;display:flex;align-items:center;gap:.3rem}

/* ─── TAGS ──────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .6rem;border-radius:6px}
.tag-blue{background:rgba(78,122,170,.12);color:#8ab2cc;border:1px solid rgba(78,122,170,.2)}
.tag-teal{background:rgba(138,178,204,.1);color:var(--teal);border:1px solid rgba(138,178,204,.2)}
.tag-orange{background:rgba(255,160,80,.1);color:#ffa055;border:1px solid rgba(255,160,80,.2)}
.tag-purple{background:rgba(160,100,255,.1);color:#b07fff;border:1px solid rgba(160,100,255,.2)}
.tag-green{background:rgba(80,220,100,.1);color:#5adb6a;border:1px solid rgba(80,220,100,.2)}
.tag-pink{background:rgba(255,100,160,.1);color:#ff80b0;border:1px solid rgba(255,100,160,.2)}
.tag-gray{background:rgba(90,127,160,.1);color:var(--muted);border:1px solid rgba(90,127,160,.2)}

/* ─── SEARCH BAR ────────────────────────────────────────── */
.search-bar{position:relative;margin-bottom:1.5rem}
.search-bar input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.78rem 1rem .78rem 2.7rem;color:var(--text);font-family:'Raleway',sans-serif;font-size:.88rem;outline:none;transition:border-color .18s,box-shadow .18s}
.search-bar input::placeholder{color:var(--muted);opacity:.55}
.search-bar input:focus{border-color:var(--border-h);box-shadow:0 0 0 3px rgba(78,122,170,.08)}
.search-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.9rem;pointer-events:none;line-height:1}

/* ─── FILTER PILLS ──────────────────────────────────────── */
.filter-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.pill{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.42rem .95rem;font-size:.78rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s;white-space:nowrap;font-family:'Raleway',sans-serif;user-select:none}
.pill:hover{color:var(--text);border-color:rgba(78,122,170,.35)}
.pill.active{background:rgba(78,122,170,.14);border-color:rgba(78,122,170,.42);color:var(--text)}

/* ─── TOOL CARDS ─────────────────────────────────────────── */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.15rem}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.65rem;transition:border-color .22s,box-shadow .22s,transform .22s}
.tool-card:hover{border-color:var(--border-h);box-shadow:var(--glow);transform:translateY(-2px)}
.tool-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.tool-name{font-family:'Playfair Display',serif;font-size:.98rem;font-weight:700;color:var(--text)}
.tool-desc{font-size:.83rem;color:var(--muted);line-height:1.65;flex:1}
.tool-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--accent);text-decoration:none;transition:color .18s;margin-top:auto}
.tool-link:hover{color:#8ab2cc}
.tool-card[data-hidden="true"]{display:none}

/* ─── ACCORDION ─────────────────────────────────────────── */
.accordion{display:flex;flex-direction:column;gap:.5rem}
.acc-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.35rem;background:none;border:none;color:var(--text);font-family:'Raleway',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left;transition:background .18s;gap:1rem}
.acc-trigger:hover{background:rgba(78,122,170,.05)}
.acc-trigger.open{color:var(--teal)}
.acc-chev{flex-shrink:0;font-size:.7rem;transition:transform .22s;color:var(--muted)}
.acc-trigger.open .acc-chev{transform:rotate(180deg);color:var(--teal)}
.acc-body{display:none;padding:0 1.35rem 1.15rem;color:var(--muted);font-size:.88rem;line-height:1.82}
.acc-body.open{display:block;animation:accOpen .18s ease}
.acc-body p{margin-bottom:.75rem}
.acc-body p:last-child{margin-bottom:0}
.acc-item[data-hidden="true"]{display:none}

/* ─── A-Z LINKS ──────────────────────────────────────────── */
.az-links{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:2rem}
.az-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;background:var(--surface);border:1px solid var(--border);font-size:.75rem;font-weight:700;color:var(--muted);text-decoration:none;transition:all .18s}
.az-link:hover{color:var(--text);border-color:var(--border-h);background:rgba(78,122,170,.1)}
.az-link.has{color:var(--accent)}
.az-letter-group{margin-bottom:1.65rem}
.az-letter{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--accent);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center}

/* ─── GUIDE CARDS ────────────────────────────────────────── */
.guide-list{display:flex;flex-direction:column;gap:.6rem}
.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .22s}
.guide-card:hover{border-color:rgba(78,122,170,.3)}
.guide-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;cursor:pointer;transition:background .18s;gap:1rem;user-select:none}
.guide-header:hover{background:rgba(78,122,170,.05)}
.guide-header.open{background:rgba(78,122,170,.06)}
.guide-title-row{display:flex;align-items:center;gap:.85rem}
.guide-num{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--teal);background:rgba(138,178,204,.1);border:1px solid rgba(138,178,204,.2);padding:.2rem .55rem;border-radius:6px;flex-shrink:0}
.guide-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--text)}
.guide-chev{font-size:.7rem;color:var(--muted);transition:transform .22s;flex-shrink:0}
.guide-header.open .guide-chev{transform:rotate(180deg);color:var(--teal)}
.guide-body{display:none;padding:1.25rem 1.4rem;color:var(--muted);font-size:.9rem;line-height:1.85;border-top:1px solid var(--border)}
.guide-body.open{display:block;animation:accOpen .18s ease}
.guide-body p{margin-bottom:.85rem}
.guide-body p:last-child{margin-bottom:0}

/* ─── CODE BLOCKS ───────────────────────────────────────── */
.code-block{background:#08101f;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:1.25rem 0}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;background:rgba(78,122,170,.06);border-bottom:1px solid var(--border)}
.code-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.copy-btn{display:flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;color:var(--muted);background:none;border:1px solid var(--border);border-radius:6px;padding:.28rem .65rem;cursor:pointer;font-family:'Raleway',sans-serif;transition:all .18s}
.copy-btn:hover{color:var(--text);border-color:var(--border-h)}
.copy-btn.copied{color:var(--teal);border-color:rgba(138,178,204,.35)}
.code-block pre{padding:1.2rem 1.1rem;overflow-x:auto;font-size:.83rem;line-height:1.72;font-family:'Fira Code','Cascadia Code','Consolas',monospace;color:#c8d8ec}
.code-block code{font-family:inherit;white-space:pre}
.kw{color:#8ab2cc}.fn{color:#8ab2cc}.str{color:#ffa055}.cm{color:#2d4a62}.num{color:#c0a0ff}.at{color:#ff80b0}.val{color:#ffd080}.sel{color:#8ab2cc}.prop{color:#8ab2cc}

/* ─── CHEATSHEET BLOCK ──────────────────────────────────── */
.cheat-section{margin-bottom:3rem}
.cheat-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.cheat-desc{font-size:.88rem;color:var(--muted);margin-bottom:1rem;line-height:1.7}

/* ─── CHECKLIST ──────────────────────────────────────────── */
.checklist{display:flex;flex-direction:column;gap:.55rem}
.check-item{display:flex;align-items:flex-start;gap:.8rem;padding:.82rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .18s,background .18s;user-select:none}
.check-item:hover{border-color:rgba(78,122,170,.3)}
.check-item.checked{border-color:rgba(138,178,204,.28);background:rgba(138,178,204,.04)}
.check-box{width:19px;height:19px;border-radius:5px;border:2px solid rgba(78,122,170,.3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .18s;margin-top:2px}
.check-item.checked .check-box{background:var(--teal);border-color:var(--teal);color:#0d1830}
.check-box svg{display:none;width:11px;height:11px}
.check-item.checked .check-box svg{display:block}
.check-text{font-size:.87rem;color:var(--text-dim);line-height:1.6}
.check-item.checked .check-text{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(138,178,204,.4)}

/* ─── CONTRAST CHECKER ──────────────────────────────────── */
.cc-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.cc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}
.cc-group label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.cc-color-row{display:flex;align-items:center;gap:.7rem}
.cc-color-row input[type="color"]{width:42px;height:42px;border-radius:8px;border:1px solid var(--border);background:none;cursor:pointer;padding:2px}
.cc-color-row input[type="text"]{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.58rem .9rem;color:var(--text);font-family:'Raleway',sans-serif;font-size:.87rem;outline:none;transition:border-color .18s;max-width:120px}
.cc-color-row input[type="text"]:focus{border-color:var(--border-h)}
.cc-preview{height:76px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;border:1px solid var(--border);font-size:1.05rem;font-weight:600;transition:all .22s}
.cc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cc-result{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1rem .75rem}
.cc-ratio{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:700;margin-bottom:.2rem}
.cc-rlabel{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.cc-badge{font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:6px}
.cc-pass{background:rgba(138,178,204,.12);color:var(--teal);border:1px solid rgba(138,178,204,.25)}
.cc-fail{background:rgba(255,80,80,.1);color:#ff8080;border:1px solid rgba(255,80,80,.2)}

/* ─── PALETTE GENERATOR ─────────────────────────────────── */
.palette-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.palette-input-row{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;flex-wrap:wrap}
.palette-input-row input[type="color"]{width:48px;height:48px;border-radius:9px;border:1px solid var(--border);background:none;cursor:pointer;padding:3px}
.palette-input-row input[type="text"]{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.62rem 1rem;color:var(--text);font-family:'Raleway',sans-serif;font-size:.88rem;outline:none;transition:border-color .18s;width:115px}
.palette-input-row input[type="text"]:focus{border-color:var(--border-h)}
.palette-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.62rem 1.4rem;font-family:'Raleway',sans-serif;font-size:.86rem;font-weight:600;cursor:pointer;transition:background .18s}
.palette-btn:hover{background:#5a8abb}
.palette-section{margin-bottom:1.25rem}
.palette-section-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.65rem}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{width:76px;text-align:center}
.swatch-color{height:52px;border-radius:10px;border:1px solid rgba(255,255,255,.07);margin-bottom:.3rem;cursor:pointer;transition:transform .18s;title:attr(data-hex)}
.swatch-color:hover{transform:scale(1.06)}
.swatch-hex{font-size:.68rem;font-weight:600;color:var(--muted);font-family:'Raleway',sans-serif}

/* ─── DO/DON'T ───────────────────────────────────────────── */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin:1.5rem 0}
.do-box{background:rgba(138,178,204,.05);border:1px solid rgba(138,178,204,.18);border-radius:var(--radius);padding:1.4rem}
.dont-box{background:rgba(255,80,80,.05);border:1px solid rgba(255,80,80,.18);border-radius:var(--radius);padding:1.4rem}
.do-label{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem}
.dont-label{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff8080;margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem}
.do-box p,.dont-box p{font-size:.87rem;line-height:1.7}
.do-box p{color:#a8e8d8}
.dont-box p{color:#f0a8a8}

/* ─── STEP LIST ──────────────────────────────────────────── */
.step-list{display:flex;flex-direction:column;gap:1.15rem;counter-reset:steps}
.step-item{display:flex;gap:1.15rem;align-items:flex-start}
.step-num{width:34px;height:34px;border-radius:50%;background:rgba(78,122,170,.14);border:1px solid rgba(78,122,170,.32);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--accent);flex-shrink:0;margin-top:2px}
.step-content h4{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.step-content p{font-size:.86rem;color:var(--muted);line-height:1.72}

/* ─── TIP / NOTE BOXES ───────────────────────────────────── */
.tip-box{background:rgba(138,178,204,.05);border:1px solid rgba(138,178,204,.18);border-left:3px solid var(--teal);border-radius:var(--radius-sm);padding:.95rem 1.15rem;margin:1.15rem 0;font-size:.87rem;color:var(--text-dim);line-height:1.72}
.tip-box strong{color:var(--teal)}
.note-box{background:rgba(78,122,170,.06);border:1px solid rgba(78,122,170,.18);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:.95rem 1.15rem;margin:1.15rem 0;font-size:.87rem;color:var(--text-dim);line-height:1.72}
.note-box strong{color:#8ab2cc}

/* ─── STATS ROW ──────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:3rem}
.stat-item{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.65rem 1.2rem}
.stat-num{font-family:'Playfair Display',serif;font-size:2.1rem;font-weight:700;color:var(--warm);line-height:1;margin-bottom:.4rem}
.stat-label{font-size:.8rem;color:var(--muted);line-height:1.5}

/* ─── WHY CARDS ──────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.15rem;margin-top:2.5rem}
.why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.55rem}
.why-icon{font-size:1.5rem;line-height:1}
.why-card h3{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:var(--text)}
.why-card p{font-size:.84rem;color:var(--muted);line-height:1.7}

/* ─── CONTENT LAYOUT ─────────────────────────────────────── */
.content-wrap{max-width:860px;margin:0 auto}
.content-section{margin-bottom:3.25rem}
.content-section h2{font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:700;margin-bottom:.9rem}
.content-section h3{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:.6rem;margin-top:1.5rem}
.content-section p{font-size:.92rem;color:var(--muted);line-height:1.85;margin-bottom:.95rem}
.content-section p:last-child{margin-bottom:0}
.content-section ul,.content-section ol{color:var(--muted);font-size:.92rem;line-height:1.85;padding-left:1.4rem;margin-bottom:.95rem;list-style:disc}
.content-section ol{list-style:decimal}
.content-section li{margin-bottom:.3rem}
.ic{font-family:'Fira Code','Consolas',monospace;font-size:.83em;background:rgba(78,122,170,.12);border:1px solid rgba(78,122,170,.2);color:#8ab2cc;padding:.14rem .42rem;border-radius:5px}
.content-section a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.content-section a:hover{color:#8ab2cc}

/* Page-level hero (non-homepage) */
.page-hero{padding:3.5rem 1.5rem 2.5rem;border-bottom:1px solid var(--border)}
.page-hero-inner{max-width:1200px;margin:0 auto}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;margin-bottom:.75rem}
.page-hero p{font-size:.97rem;color:var(--muted);max-width:600px;line-height:1.8}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:4rem 5rem;position:relative;z-index:1}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem}
.footer-brand-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-bottom:.85rem}
.footer-logo-mark{width:56px;height:56px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 7px rgba(78,122,170,.35))}
.footer-wordmark{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--text)}
.footer-tagline{font-size:.83rem;color:var(--muted);line-height:1.75;max-width:250px}
.footer-col{display:flex;flex-direction:column;gap:.65rem}
.footer-col-title{font-family:'Playfair Display',serif;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--warm);margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between}
.footer-col a{color:var(--muted);text-decoration:none;font-size:.83rem;transition:color .2s,transform .2s}
.footer-col a:hover{color:var(--text);transform:translateX(3px)}
.footer-socials{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.25rem}
.fsoc{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#1a1a2e;border:1px solid rgba(255,255,255,.08);color:var(--text);text-decoration:none;transition:background .2s,border-color .2s;flex-shrink:0}
.fsoc:hover{background:#252545;border-color:rgba(138,178,204,.3);color:var(--warm)}
.fsoc svg{width:18px;height:18px}
.footer-dir-note{grid-column:1/-1;text-align:center;padding-top:1.5rem;margin-top:.5rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--border)}
.footer-dir-note a{color:var(--warm);text-decoration:none;font-weight:600}
.footer-dir-note a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid var(--border);padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--muted);flex-wrap:wrap;gap:.75rem}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{color:var(--muted);text-decoration:none}
.footer-legal a:hover{color:var(--text)}
@media(max-width:1100px){.site-footer{padding:3rem 2rem}}
@media(max-width:960px){.nav-links{display:none}.nav-hamburger{display:flex}.footer-inner{grid-template-columns:1fr;gap:0!important;padding-bottom:0}.footer-col{border-bottom:1px solid var(--border)!important}.footer-col-title{cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:.85rem 0!important;margin-bottom:0!important}.footer-col-title::after{content:"+";color:var(--warm);font-size:1.1rem;font-weight:300;flex-shrink:0;width:16px;text-align:center}.footer-col.open .footer-col-title::after{content:"\2212"}.footer-col>a{display:none!important;padding:.35rem .25rem!important}.footer-col.open>a{display:block!important}.footer-col>.footer-socials{display:none!important}.footer-col.open>.footer-socials{display:flex!important;padding:.35rem 0 .85rem!important}.footer-dir-note{grid-column:auto;margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}}

/* ─── BACK TO TOP ────────────────────────────────────────── */
.back-top{position:fixed;bottom:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:10px;background:var(--warm);color:#0d1830;border:none;font-size:1rem;display:none;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,transform .15s;z-index:500;box-shadow:0 4px 16px rgba(138,178,204,.28)}
.back-top.visible{display:flex;animation:fadeIn .2s ease}
.back-top:hover{background:var(--warm2);transform:translateY(-2px)}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes accOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:960px){
  .cc-inputs{grid-template-columns:1fr}
  .cc-results{grid-template-columns:1fr 1fr}
  .do-dont{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero{padding:3.5rem 1.2rem 2.75rem}
  .section{padding:3rem 1.2rem}
  .page-hero{padding:2.75rem 1.2rem 2rem}
  .stats-row{grid-template-columns:1fr}
  .card-grid,.tool-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{justify-content:center}
  .cc-results{grid-template-columns:1fr}
}