/* ============================================================
   GradePilot — styles.css  v2.0
   Premium Grade Calculator Website
   Mobile-first, Calculator.net-style layout
============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
  --blue:       #3D6EFE;
  --blue-h:     #2958E4;
  --blue-deep:  #1A3AC9;
  --blue-lt:    #EEF3FF;
  --blue-mid:   rgba(61,110,254,.12);
  --green:      #00C875;
  --grade-a:    #00C875; --grade-a-bg:#E6F9F1;
  --grade-b:    #22B573; --grade-b-bg:#E8F6F0;
  --grade-c:    #F5A623; --grade-c-bg:#FEF4E3;
  --grade-d:    #F07030; --grade-d-bg:#FEF0E8;
  --grade-f:    #F04040; --grade-f-bg:#FEE8E8;
  --t1:#0A1628; --t2:#3A4F6E; --t3:#7080A0; --t4:#A8B8CC;
  --b1:#FFFFFF; --b2:#F5F7FC; --b3:#EDF0F8; --b4:#E2E8F4;
  --br1:rgba(10,22,40,.07); --br2:rgba(10,22,40,.12); --br3:rgba(10,22,40,.22);
  --hero:#0A1628; --htxt:#F0F5FF;
  --hmuted:rgba(240,245,255,.55); --hbr:rgba(240,245,255,.09);
  --sx:0 1px 2px rgba(10,22,40,.05);
  --ss:0 1px 4px rgba(10,22,40,.06),0 2px 8px rgba(10,22,40,.04);
  --sm:0 2px 8px rgba(10,22,40,.06),0 8px 24px rgba(10,22,40,.06);
  --sl:0 4px 16px rgba(10,22,40,.08),0 16px 48px rgba(10,22,40,.08);
  --sxl:0 8px 32px rgba(10,22,40,.14),0 32px 80px rgba(10,22,40,.10);
  --rxs:4px; --rsm:8px; --rmd:12px; --rlg:16px; --rxl:24px; --r2xl:32px;
  --tf:150ms ease; --tm:250ms ease; --ts:400ms cubic-bezier(.4,0,.2,1);
  --fd:'Syne',sans-serif; --fb:'Plus Jakarta Sans',sans-serif;
  --nav-h:64px;
}
[data-theme="dark"] {
  --t1:#EEF3FF; --t2:#9EB4D4; --t3:#56708E; --t4:#36506E;
  --b1:#0A1224; --b2:#0F1B33; --b3:#162038; --b4:#1E2E48;
  --br1:rgba(240,245,255,.06); --br2:rgba(240,245,255,.10); --br3:rgba(240,245,255,.17);
  --blue-lt:rgba(61,110,254,.13); --blue-mid:rgba(61,110,254,.18);
  --grade-a-bg:rgba(0,200,117,.13); --grade-b-bg:rgba(34,181,115,.13);
  --grade-c-bg:rgba(245,166,35,.13); --grade-d-bg:rgba(240,112,48,.13);
  --grade-f-bg:rgba(240,64,64,.13);
  --sx:0 1px 2px rgba(0,0,0,.25);
  --ss:0 1px 4px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --sm:0 2px 8px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  --sl:0 4px 16px rgba(0,0,0,.45),0 16px 48px rgba(0,0,0,.35);
  --sxl:0 8px 32px rgba(0,0,0,.55),0 32px 80px rgba(0,0,0,.45);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--b1);color:var(--t1);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background var(--ts),color var(--ts);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}
ul,ol{list-style:none}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--rxs)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT
============================================================ */
.container{width:100%;max-width:1220px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section--bg{background:var(--b2)}
.section--dark{background:var(--hero);color:var(--htxt)}

/* ============================================================
   TYPOGRAPHY HELPERS
============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--blue);margin-bottom:12px}
.eyebrow::before{content:'';display:block;width:22px;height:2px;background:var(--blue);border-radius:2px}
.sec-title{font-family:var(--fd);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;
  color:var(--t1);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.sec-sub{font-size:1rem;color:var(--t2);max-width:560px;line-height:1.7}
.sec-hd{margin-bottom:48px}
.sec-hd--c{text-align:center}
.sec-hd--c .eyebrow{justify-content:center}
.sec-hd--c .sec-sub{margin:0 auto}

/* ============================================================
   HEADER & NAVIGATION
============================================================ */
.site-header{position:sticky;top:0;z-index:200;background:var(--b1);
  border-bottom:1px solid var(--br1);transition:background var(--ts),box-shadow var(--tm)}
.site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--br1),var(--ss)}
[data-theme="dark"] .site-header.scrolled{background:rgba(10,18,36,.92)}
.header-inner{display:flex;align-items:center;height:var(--nav-h);gap:4px}

/* Logo */
.site-logo{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-right:16px;text-decoration:none}
.logo-mark{width:34px;height:34px;background:var(--blue);border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark-txt{font-family:var(--fd);font-size:13px;font-weight:800;color:#fff;letter-spacing:-.05em}
.logo-name{font-family:var(--fd);font-size:1.1rem;font-weight:800;color:var(--t1);letter-spacing:-.03em}

/* Desktop Nav */
.site-nav{display:flex;align-items:center;gap:1px;flex:1;flex-wrap:nowrap}
.site-nav > a,.nav-drop > .nav-parent{display:flex;align-items:center;gap:5px;padding:6px 10px;
  font-size:.825rem;font-weight:600;color:var(--t2);border-radius:var(--rsm);
  transition:color var(--tf),background var(--tf);white-space:nowrap;cursor:pointer}
.site-nav > a:hover,.nav-drop > .nav-parent:hover{color:var(--t1);background:var(--b2)}
.site-nav > a.active{color:var(--blue);background:var(--blue-lt)}
.site-nav > a svg,.nav-parent svg{width:13px;height:13px;flex-shrink:0}

/* Dropdown */
.nav-drop{position:relative}
.nav-parent{border-radius:var(--rsm)}
.nav-parent .chev{width:12px;height:12px;transition:transform var(--tf)}
.nav-drop.open .chev{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:520px;background:var(--b1);border:1px solid var(--br1);border-radius:var(--rlg);
  box-shadow:var(--sl);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--tf),transform var(--tf),visibility var(--tf);
  transform:translateX(-50%) translateY(-8px)}
.nav-drop.open .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.nav-dd-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--rsm);
  font-size:.825rem;font-weight:600;color:var(--t2);transition:color var(--tf),background var(--tf)}
.nav-dd-item:hover{color:var(--blue);background:var(--blue-lt)}
.nav-dd-item svg{width:15px;height:15px;color:var(--t4);flex-shrink:0;transition:color var(--tf)}
.nav-dd-item:hover svg{color:var(--blue)}
/* Active states for nav items */
.nav-dd-item.active{color:var(--blue);background:var(--blue-lt)}
.nav-dd-item.active svg{color:var(--blue)}
.site-nav > a.active{color:var(--blue);background:var(--blue-lt)}

.nav-dd-item span{line-height:1.2}
.nav-dd-cat{grid-column:1/-1;font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t4);padding:6px 11px 2px;margin-top:4px}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-icon{width:36px;height:36px;border-radius:var(--rsm);background:var(--b2);color:var(--t2);
  display:flex;align-items:center;justify-content:center;transition:background var(--tf),color var(--tf)}
.btn-icon:hover{background:var(--b3);color:var(--t1)}
.btn-icon svg{width:16px;height:16px}
.icon-sun{display:none} .icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:block} [data-theme="dark"] .icon-moon{display:none}
.btn-mob-menu{display:none}

/* Mobile Nav */
.mobile-nav{display:none;flex-direction:column;padding:8px 12px 16px;
  border-top:1px solid var(--br1);background:var(--b1);max-height:calc(100vh - var(--nav-h));
  overflow-y:auto}
.mobile-nav.open{display:flex}
.mob-nav-cat{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t4);padding:12px 12px 4px}
.mob-nav-cat:first-child{padding-top:6px}
.mobile-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:.875rem;
  font-weight:600;color:var(--t2);border-radius:var(--rsm);transition:color var(--tf),background var(--tf)}
.mobile-nav a:hover{color:var(--blue);background:var(--blue-lt)}
.mobile-nav a svg{width:15px;height:15px;flex-shrink:0}
.mobile-nav a.active{color:var(--blue);background:var(--blue-lt)}

/* ============================================================
   BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--rmd);
  font-size:.9375rem;font-weight:700;transition:all var(--tf);cursor:pointer;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(61,110,254,.35)}
.btn--primary:hover{background:var(--blue-h);transform:translateY(-1px);box-shadow:0 6px 22px rgba(61,110,254,.45)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.14)}
.btn--ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.btn--outline{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.btn--outline:hover{background:var(--blue);color:#fff}
.btn--sm{padding:8px 16px;font-size:.8125rem}

/* ============================================================
   CALCULATOR HERO (Page-level layout)
============================================================ */
.calc-page-hero{background:var(--hero);padding:52px 0 56px;position:relative;overflow:hidden}
.calc-page-hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none}
.calc-page-hero .hero-glow{position:absolute;top:-10%;right:-5%;width:50%;padding-top:50%;
  background:radial-gradient(circle,rgba(61,110,254,.22) 0%,transparent 65%);
  filter:blur(70px);pointer-events:none}
.calc-page-inner{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;
  position:relative;z-index:1}
.calc-page-lft{padding-top:8px}
.page-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;
  background:rgba(61,110,254,.14);border:1px solid rgba(61,110,254,.3);
  border-radius:100px;font-size:.7rem;font-weight:700;color:#90B5FF;
  margin-bottom:18px;letter-spacing:.04em;text-transform:uppercase}
.calc-page-h1{font-family:var(--fd);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;
  color:var(--htxt);line-height:1.08;letter-spacing:-.035em;margin-bottom:16px}
.calc-page-h1 .grad{background:linear-gradient(135deg,#7EACFF 0%,#B09EFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.calc-page-desc{font-size:1rem;color:var(--hmuted);line-height:1.72;margin-bottom:28px;max-width:440px}
.calc-page-meta{display:flex;gap:20px;flex-wrap:wrap}
.cpm-item{display:flex;align-items:center;gap:7px;font-size:.8rem;color:rgba(240,245,255,.6);font-weight:500}
.cpm-item svg{width:14px;height:14px;color:var(--green)}

/* HOME HERO */
.hero{background:var(--hero);position:relative;overflow:hidden;padding:80px 0 90px}
.hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;z-index:0}
.hero-glow{position:absolute;top:-10%;right:-8%;width:60%;padding-top:60%;
  background:radial-gradient(circle,rgba(61,110,254,.28) 0%,transparent 65%);
  filter:blur(80px);pointer-events:none;z-index:0}
.hero-glow2{position:absolute;bottom:-20%;left:-5%;width:40%;padding-top:40%;
  background:radial-gradient(circle,rgba(124,58,237,.16) 0%,transparent 65%);
  filter:blur(80px);pointer-events:none;z-index:0}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;
  background:rgba(61,110,254,.14);border:1px solid rgba(61,110,254,.3);
  border-radius:100px;font-size:.72rem;font-weight:700;color:#90B5FF;
  margin-bottom:22px;letter-spacing:.04em;text-transform:uppercase}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#90B5FF;animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.hero-h1{font-family:var(--fd);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:800;
  color:var(--htxt);line-height:1.04;letter-spacing:-.035em;margin-bottom:20px}
.hero-h1 .grad{background:linear-gradient(135deg,#7EACFF 0%,#B09EFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.075rem;color:var(--hmuted);line-height:1.75;margin-bottom:34px;max-width:430px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:flex;gap:32px;padding-top:32px;border-top:1px solid var(--hbr)}
.hstat-num{font-family:var(--fd);font-size:1.4rem;font-weight:800;color:var(--htxt);
  letter-spacing:-.03em;line-height:1}
.hstat-lbl{font-size:.76rem;color:var(--hmuted);margin-top:4px;font-weight:500}

/* ============================================================
   CALCULATOR CARD
============================================================ */
.calc-card{background:var(--b1);border-radius:var(--r2xl);box-shadow:var(--sxl);
  padding:24px;border:1px solid var(--br1)}
.calc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.calc-title{font-family:var(--fd);font-size:1rem;font-weight:800;color:var(--t1);letter-spacing:-.025em}
.calc-live{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;
  color:var(--green);letter-spacing:.04em;text-transform:uppercase}
.calc-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Tabs */
.calc-tabs{display:flex;background:var(--b2);border-radius:var(--rsm);padding:3px;margin-bottom:16px;gap:2px}
.c-tab{flex:1;padding:8px 6px;text-align:center;font-size:.8rem;font-weight:700;
  color:var(--t3);border-radius:6px;transition:all var(--tf)}
.c-tab:hover:not(.active){color:var(--t2)}
.c-tab.active{background:var(--b1);color:var(--t1);box-shadow:var(--sx)}

/* Rows */
.calc-rows{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.calc-row{display:grid;grid-template-columns:1fr 26px 1fr 28px;gap:7px;align-items:center}
.calc-row.pct-only{grid-template-columns:1fr 28px}
.calc-row.three-col{grid-template-columns:1fr 1fr 28px;gap:7px}
.calc-row.four-col{grid-template-columns:1fr 1fr 1fr 28px;gap:7px}
.row-lbl{font-size:.72rem;font-weight:700;color:var(--t3);text-align:center;letter-spacing:.02em}
.row-rm{width:26px;height:26px;border-radius:6px;background:var(--b3);color:var(--t3);
  display:flex;align-items:center;justify-content:center;transition:all var(--tf);flex-shrink:0}
.row-rm:hover{background:#fee8e8;color:var(--grade-f)}
.row-rm svg{width:12px;height:12px;pointer-events:none}
.row-rm.hidden{visibility:hidden}

/* Inputs */
.calc-input{width:100%;padding:9px 12px;background:var(--b2);border:1.5px solid var(--br2);
  border-radius:var(--rsm);font-size:.9rem;font-weight:600;color:var(--t1);
  transition:border-color var(--tf),background var(--tf),box-shadow var(--tf)}
.calc-input:focus{outline:none;border-color:var(--blue);background:var(--b1);
  box-shadow:0 0 0 3px rgba(61,110,254,.12)}
.calc-input::placeholder{color:var(--t4);font-weight:400}
.calc-input.error{border-color:var(--grade-f);box-shadow:0 0 0 3px rgba(240,64,64,.1)}
select.calc-input{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237080A0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}

/* Add row button */
.calc-add-btn{width:100%;padding:8px 12px;border:1.5px dashed var(--br2);
  border-radius:var(--rsm);font-size:.8rem;font-weight:700;color:var(--t3);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--tf);margin-top:6px}
.calc-add-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
.calc-add-btn svg{width:13px;height:13px}
.calc-add-btn.hidden{display:none}

/* Result */
.calc-result-wrap{background:var(--b2);border-radius:var(--rlg);padding:18px;margin-top:12px}
.calc-empty-msg{font-size:.875rem;color:var(--t3);text-align:center;font-weight:500;padding:8px 0}
.result-data{display:none}
.result-data.show{display:block}
.result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.result-pct-wrap{display:flex;align-items:baseline;gap:6px}
.result-pct{font-family:var(--fd);font-size:2.2rem;font-weight:800;color:var(--t1);
  line-height:1;letter-spacing:-.04em}
.result-pct-label{font-size:.8rem;color:var(--t3);font-weight:500}
.result-grades{display:flex;align-items:center;gap:8px}
.result-letter{font-family:var(--fd);font-size:1.6rem;font-weight:800;line-height:1;
  padding:4px 12px;border-radius:var(--rsm)}
.result-gpa{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:var(--rxs)}
.s-excellent{color:var(--grade-a);background:var(--grade-a-bg)}
.s-good{color:var(--grade-b);background:var(--grade-b-bg)}
.s-average{color:var(--grade-c);background:var(--grade-c-bg)}
.s-poor{color:var(--grade-d);background:var(--grade-d-bg)}
.s-fail{color:var(--grade-f);background:var(--grade-f-bg)}
.result-bar{height:6px;background:var(--b3);border-radius:3px;overflow:hidden;margin-bottom:10px}
.result-bar-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1),background .4s ease}
.result-formula{font-size:.75rem;color:var(--t3);font-weight:500;font-family:monospace}
.result-actions{display:flex;gap:8px;margin-top:12px}
.btn-action{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--rsm);
  font-size:.78rem;font-weight:700;transition:all var(--tf);cursor:pointer}
.btn-copy{background:var(--blue-lt);color:var(--blue)}
.btn-copy:hover{background:var(--blue);color:#fff}
.btn-clr{background:var(--b3);color:var(--t3)}
.btn-clr:hover{background:var(--br2);color:var(--t2)}
.btn-action svg{width:12px;height:12px}
.calc-foot{text-align:center;font-size:.73rem;color:var(--t3);margin-top:12px}
.calc-foot a{color:var(--blue);font-weight:700}
.calc-foot a:hover{text-decoration:underline}

/* GPA specific results */
.gpa-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.gpa-stat{background:var(--b1);border-radius:var(--rsm);padding:12px;text-align:center;
  border:1px solid var(--br1)}
.gpa-stat-val{font-family:var(--fd);font-size:1.5rem;font-weight:800;color:var(--t1);
  letter-spacing:-.04em;line-height:1}
.gpa-stat-lbl{font-size:.7rem;color:var(--t3);font-weight:600;margin-top:4px}
.gpa-bar{height:8px;background:var(--b3);border-radius:4px;overflow:hidden;margin-bottom:8px}
.gpa-bar-fill{height:100%;border-radius:4px;background:var(--blue);
  transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.78rem;
  color:rgba(240,245,255,.5);flex-wrap:wrap;margin-bottom:18px}
.breadcrumb a{color:rgba(240,245,255,.6);transition:color var(--tf)}
.breadcrumb a:hover{color:var(--htxt)}
.breadcrumb-sep{opacity:.4}

/* ============================================================
   CONTENT SECTIONS (below calculator)
============================================================ */
.content-wrap{max-width:860px;margin:0 auto}
.content-section{padding:56px 0;border-bottom:1px solid var(--br1)}
.content-section:last-child{border-bottom:none}
.content-section h2{font-family:var(--fd);font-size:clamp(1.25rem,2.5vw,1.6rem);font-weight:800;
  color:var(--t1);letter-spacing:-.03em;margin-bottom:16px}
.content-section h3{font-family:var(--fd);font-size:1.05rem;font-weight:800;color:var(--t1);
  letter-spacing:-.02em;margin:24px 0 10px}
.content-section p{font-size:.975rem;color:var(--t2);line-height:1.8;margin-bottom:14px}
.content-section p:last-child{margin-bottom:0}
.content-section ul,.content-section ol{padding-left:1.25rem;margin-bottom:14px}
.content-section li{font-size:.975rem;color:var(--t2);line-height:1.8;margin-bottom:6px}
.content-section ol{list-style:decimal}
.content-section ul li::marker{color:var(--blue)}

/* Formula box */
.formula-box{background:var(--b2);border:1.5px solid var(--br2);border-radius:var(--rmd);
  padding:20px 24px;margin:20px 0}
.formula-box .formula{font-family:monospace;font-size:1.0625rem;font-weight:600;color:var(--t1);
  letter-spacing:.01em;margin-bottom:8px}
.formula-box .formula-note{font-size:.85rem;color:var(--t3)}
.formula-box.highlight{border-color:var(--blue);background:var(--blue-lt)}
.formula-box.highlight .formula{color:var(--blue)}

/* Example box */
.example-box{background:linear-gradient(135deg,var(--b2),var(--b3));
  border-radius:var(--rlg);padding:24px;margin:20px 0;border:1px solid var(--br1)}
.example-box h4{font-family:var(--fd);font-size:.9rem;font-weight:800;color:var(--blue);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.example-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--br1)}
.example-row:last-child{border-bottom:none;font-weight:700;color:var(--t1)}
.example-lbl{flex:1;font-size:.875rem;color:var(--t2)}
.example-val{font-size:.875rem;font-weight:700;color:var(--t1);font-family:monospace}

/* Step boxes */
.steps-list{counter-reset:step;display:flex;flex-direction:column;gap:16px;margin:20px 0}
.step-item{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--blue-lt);
  color:var(--blue);font-family:var(--fd);font-size:.9rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-content h4{font-weight:700;color:var(--t1);margin-bottom:4px;font-size:.9rem}
.step-content p{font-size:.875rem;color:var(--t2);line-height:1.6;margin:0}

/* Grade conversion table */
.grade-table-wrap{overflow-x:auto;margin:20px 0}
.grade-tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.grade-tbl th{padding:10px 14px;background:var(--b3);font-weight:700;color:var(--t1);
  text-align:left;border-bottom:2px solid var(--br2);font-family:var(--fd);font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase}
.grade-tbl td{padding:9px 14px;border-bottom:1px solid var(--br1);color:var(--t2)}
.grade-tbl tr:last-child td{border-bottom:none}
.grade-tbl tr:hover td{background:var(--b2)}
.grade-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;
  font-weight:700;font-size:.8rem}
.gbar-wrap{width:80px;display:inline-flex;height:4px;background:var(--b3);border-radius:2px;
  overflow:hidden;vertical-align:middle}
.gbar-fill{height:100%;border-radius:2px;width:0;transition:width .8s ease}
.gbar-fill.animate{/* width set inline */}

/* ============================================================
   FAQ SECTION
============================================================ */
.faq-list{display:flex;flex-direction:column;gap:2px}
.faq-item{border:1px solid var(--br1);border-radius:var(--rmd);overflow:hidden;
  transition:border-color var(--tf)}
.faq-item.open{border-color:var(--blue)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;text-align:left;font-size:.9375rem;font-weight:700;color:var(--t1);
  transition:color var(--tf),background var(--tf)}
.faq-q:hover{background:var(--b2)}
.faq-item.open .faq-q{color:var(--blue);background:var(--blue-lt)}
.faq-icon{width:20px;height:20px;border-radius:50%;background:var(--b3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--tf),transform var(--tf)}
.faq-icon svg{width:12px;height:12px;transition:transform var(--tf)}
.faq-item.open .faq-icon{background:var(--blue);transform:none}
.faq-item.open .faq-icon svg{transform:rotate(45deg);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-a-inner{padding:0 18px 16px;font-size:.9rem;color:var(--t2);line-height:1.75}
.faq-item.open .faq-a{max-height:300px}

/* ============================================================
   TOOL CARDS (Home page)
============================================================ */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-card{display:flex;flex-direction:column;gap:12px;padding:22px;
  background:var(--b1);border:1px solid var(--br1);border-radius:var(--rlg);
  text-decoration:none;transition:all var(--tm);position:relative;overflow:hidden}
.tool-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,
  transparent 0%,var(--blue-mid) 100%);opacity:0;transition:opacity var(--tm)}
.tool-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--sm)}
.tool-card:hover::before{opacity:1}
.tool-card:hover .tc-arr{transform:translateX(3px);opacity:1}
.tc-icon{width:42px;height:42px;border-radius:var(--rsm);background:var(--blue-lt);
  color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-icon svg{width:20px;height:20px}
.tc-hd{display:flex;align-items:center;justify-content:space-between}
.tc-arr{width:18px;height:18px;color:var(--blue);opacity:0;transition:all var(--tf)}
.tc-name{font-family:var(--fd);font-size:.95rem;font-weight:800;color:var(--t1);
  letter-spacing:-.02em;margin-bottom:5px}
.tc-desc{font-size:.82rem;color:var(--t3);line-height:1.55}
.tc-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;
  background:var(--blue-lt);color:var(--blue);font-size:.68rem;font-weight:700;margin-top:4px}

/* ============================================================
   RELATED CALCULATORS
============================================================ */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel-card{display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:var(--b1);border:1px solid var(--br1);border-radius:var(--rmd);
  text-decoration:none;transition:all var(--tf)}
.rel-card:hover{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
.rel-card svg{width:18px;height:18px;flex-shrink:0;color:var(--t4)}
.rel-card:hover svg{color:var(--blue)}
.rel-card span{font-size:.85rem;font-weight:700;color:var(--t1);line-height:1.3}
.rel-card:hover span{color:var(--blue)}

/* ============================================================
   GRADE SCALE (Home)
============================================================ */
.grade-tbl-home{width:100%;border-collapse:collapse}
.grade-tbl-home th{padding:8px 12px;background:var(--hero);color:var(--htxt);
  font-size:.75rem;font-weight:700;text-align:left;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid rgba(240,245,255,.08)}
.grade-tbl-home td{padding:9px 12px;border-bottom:1px solid var(--br1);font-size:.875rem;color:var(--t2)}
.grade-tbl-home tr:last-child td{border-bottom:none}

/* ============================================================
   TOAST
============================================================ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(calc(100% + 24px));
  background:#0A1628;color:#fff;padding:10px 20px;border-radius:100px;font-size:.85rem;
  font-weight:600;z-index:9999;transition:transform .3s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;box-shadow:var(--sl)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================
   ANIMATION
============================================================ */
.anim{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.anim.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.05s} .d2{transition-delay:.1s} .d3{transition-delay:.15s}
.d4{transition-delay:.2s}  .d5{transition-delay:.25s} .d6{transition-delay:.3s}
.d7{transition-delay:.35s} .d8{transition-delay:.4s}  .d9{transition-delay:.45s}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);
  transform:scale(0);animation:rippleAnim .6s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ============================================================
   HOW IT WORKS (Home)
============================================================ */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.how-step{padding:28px 24px;background:var(--b1);border-radius:var(--rlg);
  border:1px solid var(--br1);position:relative}
.how-step-num{font-family:var(--fd);font-size:2.5rem;font-weight:800;color:var(--blue-lt);
  line-height:1;margin-bottom:12px;letter-spacing:-.05em}
.how-step-title{font-family:var(--fd);font-size:1.0rem;font-weight:800;color:var(--t1);
  letter-spacing:-.02em;margin-bottom:8px}
.how-step-desc{font-size:.875rem;color:var(--t2);line-height:1.65}

/* ============================================================
   STATS BAR (Home)
============================================================ */
.stats-bar{background:var(--hero);padding:40px 0}
.stats-inner{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:16px 40px;
  border-right:1px solid var(--hbr)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--fd);font-size:1.8rem;font-weight:800;color:var(--htxt);letter-spacing:-.04em}
.stat-lbl{font-size:.78rem;color:var(--hmuted);font-weight:500;margin-top:4px}

/* ============================================================
   FOOTER
============================================================ */
.site-footer{background:var(--hero);padding:52px 0 28px;border-top:1px solid rgba(240,245,255,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.footer-brand .logo-name{color:var(--htxt)}
.footer-brand .logo-mark{margin-bottom:16px}
.footer-tagline{font-size:.875rem;color:var(--hmuted);line-height:1.7;margin-top:12px;max-width:240px}
.footer-col h4{font-family:var(--fd);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(240,245,255,.4);margin-bottom:14px}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:.875rem;color:rgba(240,245,255,.55);transition:color var(--tf)}
.footer-col a:hover{color:var(--htxt)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid rgba(240,245,255,.06);flex-wrap:wrap;gap:12px}
.footer-copy{font-size:.8rem;color:rgba(240,245,255,.35)}
.footer-links{display:flex;gap:20px}
.footer-links a{font-size:.8rem;color:rgba(240,245,255,.4);transition:color var(--tf)}
.footer-links a:hover{color:rgba(240,245,255,.8)}

/* ============================================================
   ADSENSE PLACEHOLDERS
============================================================ */
.ad-slot{display:flex;align-items:center;justify-content:center;background:var(--b2);
  border:1px dashed var(--br2);border-radius:var(--rsm);color:var(--t4);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;overflow:hidden}
.ad-banner{height:90px;margin:24px auto;max-width:728px}
.ad-rect{width:300px;height:250px;flex-shrink:0}
.ad-mobile{display:none;height:50px;margin:16px auto;max-width:320px}

/* ============================================================
   PAGE SPECIFIC - CALC PAGE LAYOUT
============================================================ */
.calc-page-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;
  margin-top:48px}
.calc-page-main{}
.calc-page-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:84px}
.sidebar-card{background:var(--b1);border:1px solid var(--br1);border-radius:var(--rlg);
  padding:20px;overflow:hidden}
.sidebar-card h3{font-family:var(--fd);font-size:.875rem;font-weight:800;color:var(--t1);
  letter-spacing:-.01em;margin-bottom:12px}
.sidebar-links{display:flex;flex-direction:column;gap:3px}
.sidebar-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--rsm);
  font-size:.82rem;font-weight:600;color:var(--t2);transition:all var(--tf)}
.sidebar-link:hover,.sidebar-link.active{color:var(--blue);background:var(--blue-lt)}
.sidebar-link svg{width:14px;height:14px;flex-shrink:0}
.sidebar-link.active svg{color:var(--blue)}

/* ============================================================
   RESPONSIVE — 1060px
============================================================ */
@media(max-width:1060px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .calc-page-layout{grid-template-columns:1fr}
  .calc-page-sidebar{position:static}
  .ad-rect{display:none}
  .hero-inner,.calc-page-inner{grid-template-columns:1fr;gap:36px}
  .hero{padding:56px 0 64px}
  .calc-page-hero{padding:40px 0 44px}
  .hero-sub,.calc-page-desc{max-width:100%}
}

/* ============================================================
   RESPONSIVE — 768px
============================================================ */
@media(max-width:768px){
  :root{--nav-h:58px}
  .container{padding:0 16px}
  .section{padding:52px 0}
  .how-steps{grid-template-columns:1fr}
  .gpa-result-grid{grid-template-columns:1fr 1fr}
  .tools-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .site-nav{display:none}
  .btn-mob-menu{display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:var(--rsm);background:var(--b2);color:var(--t2)}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;text-align:center}
  .stats-inner{gap:0}
  .stat-item{padding:12px 20px;border-right:none;border-bottom:1px solid var(--hbr);width:50%}
  .stat-item:last-child,.stat-item:nth-child(even){border-right:none}
  .ad-banner{display:none}
  .ad-mobile{display:flex}
  .hero-stats{gap:20px}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;justify-content:center}
  .nav-dropdown{min-width:300px;grid-template-columns:1fr}
  .calc-page-inner{grid-template-columns:1fr}
  .footer-links{gap:12px;flex-wrap:wrap;justify-content:center}
}

/* ============================================================
   RESPONSIVE — 560px
============================================================ */
@media(max-width:560px){
  .calc-row{grid-template-columns:1fr 24px 1fr 24px;gap:5px}
  .calc-row.pct-only{grid-template-columns:1fr 24px}
  .calc-row.three-col{grid-template-columns:1fr 1fr 24px;gap:5px}
  .calc-row.four-col{grid-template-columns:1fr 1fr 24px;gap:5px}
  .result-pct{font-size:1.8rem}
  .gpa-result-grid{grid-template-columns:1fr 1fr 1fr}
  .result-row{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-stats{flex-wrap:wrap;gap:16px}
  .stat-item{width:100%}
}

/* ============================================================
   PRINT
============================================================ */

/* ============================================================
   EXTRA MOBILE POLISH
============================================================ */
@media(max-width:480px){
  .calc-page-h1{font-size:1.6rem}
  .calc-card{padding:16px}
  .calc-result-wrap{padding:14px}
  .result-pct{font-size:1.6rem}
  .gpa-stat-val{font-size:1.2rem}
  .gpa-result-grid{grid-template-columns:1fr 1fr 1fr}
  .page-badge{font-size:.65rem}
  .breadcrumb{font-size:.72rem}
  .example-box{padding:16px}
  .formula-box{padding:14px 16px}
  .formula-box .formula{font-size:.92rem}
  .faq-q{font-size:.875rem;padding:13px 14px}
  .faq-a-inner{padding:0 14px 13px;font-size:.85rem}
  .step-item{grid-template-columns:32px 1fr;gap:10px}
  .step-num{width:30px;height:30px;font-size:.8rem}
  .c-tab{font-size:.75rem;padding:7px 4px}
  .calc-tabs{gap:1px;padding:2px}
  .header-inner{gap:2px}
  .logo-name{font-size:1rem}
  .result-actions{flex-direction:column;gap:6px}
  .btn-action{width:100%;justify-content:center;padding:9px}
  .rel-card{padding:11px 12px}
  .rel-card span{font-size:.8rem}
  .footer-links{gap:8px}
}

/* Prevent calc inputs from being too small on mobile */
@media(max-width:400px){
  .calc-input{padding:8px 9px;font-size:.85rem}
  select.calc-input{padding-right:28px}
  .calc-row{gap:4px}
  .row-rm{width:22px;height:22px}
  .row-rm svg{width:10px;height:10px}
}

@media print{
  .site-header,.site-footer,.calc-add-btn,.result-actions,.ad-slot{display:none!important}
  body{background:#fff;color:#000}
}