:root{
    --bg-0:#080d22;
    --bg-1:#0c1436;
    --bg-2:#111d4a;
    --bg-3:#162458;
    --gold:#c9a44c;
    --gold-bright:#eccf80;
    --cyan:#5fd6d6;
    --cyan-bright:#8ff0f0;
    --ink:#f4efe2;
    --ink-dim:#a9b1d1;
    --ink-faint:#6b729a;
    --line:rgba(201,164,76,0.22);
    --line-bright:rgba(201,164,76,0.5);
    --ok:#7fd99a;
    --warn:#e5a25a;
    --danger:#e08585;
    --radius:16px;
    --shadow:0 20px 60px -20px rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1100px 600px at 12% -10%, rgba(95,214,214,0.08), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(201,164,76,0.10), transparent 55%),
      linear-gradient(180deg,var(--bg-0),var(--bg-1) 40%,var(--bg-0));
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    min-height:100vh;
    padding:48px 20px 80px;
    background-attachment:fixed;
  }
  .wrap{max-width:980px;margin:0 auto;}

  /* ---------- Header / signature seal ---------- */
  header{text-align:center;margin-bottom:44px;position:relative;}
  .seal{
    width:74px;height:74px;margin:0 auto 20px;
    border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6d2c 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(201,164,76,0.18), 0 0 40px rgba(201,164,76,0.35), var(--shadow);
    position:relative;
  }
  .seal::before{
    content:"";
    position:absolute;inset:6px;
    border-radius:50%;
    border:1.5px dashed rgba(8,13,34,0.35);
  }
  .seal span{font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:#211703;letter-spacing:-0.5px;}
  h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(28px,4.2vw,42px);
    letter-spacing:-0.5px;
    margin:0 0 10px;
    background:linear-gradient(135deg,var(--ink),var(--gold-bright) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header p{
    color:var(--ink-dim);
    font-size:15.5px;
    max-width:560px;
    margin:0 auto;
    line-height:1.6;
  }
  header p .hl{color:var(--cyan-bright);}

  /* ---------- System tabs ---------- */
  .tabs{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px;
  }
  .tab{
    border:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    color:var(--ink-dim);
    font-family:'Manrope',sans-serif;
    font-weight:600;
    font-size:13px;
    padding:9px 16px;
    border-radius:100px;
    cursor:pointer;
    transition:all .2s ease;
    letter-spacing:0.2px;
  }
  .tab:hover{border-color:var(--line-bright);color:var(--ink);}
  .tab.active{
    background:linear-gradient(135deg,rgba(201,164,76,0.22),rgba(95,214,214,0.10));
    border-color:var(--gold);
    color:var(--gold-bright);
    box-shadow:0 0 18px rgba(201,164,76,0.18);
  }

  /* ---------- Main grid ---------- */
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }
  @media (max-width:760px){ .grid{grid-template-columns:1fr;} }

  .card{
    background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-bright),transparent);
  }
  .card h2{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:18px;
    margin:0 0 4px;
    color:var(--ink);
  }
  .card .sub{
    font-size:12.5px;color:var(--ink-faint);margin:0 0 22px;
    text-transform:uppercase;letter-spacing:0.8px;
  }

  label{
    display:block;font-size:12.5px;font-weight:700;color:var(--ink-dim);
    text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px;
  }
  .field{margin-bottom:20px;}
  input[type=number], select{
    width:100%;
    background:rgba(4,8,22,0.55);
    border:1px solid var(--line);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:16px;
    font-weight:600;
    padding:13px 14px;
    border-radius:10px;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
    appearance:none;
  }
  select{cursor:pointer;}
  input[type=number]:focus, select:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(95,214,214,0.15);
  }
  .radio-row{display:flex;flex-wrap:wrap;gap:8px;}
  .radio-pill{
    border:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    padding:9px 13px;border-radius:10px;font-size:13px;font-weight:600;
    color:var(--ink-dim);cursor:pointer;transition:all .2s ease;
  }
  .radio-pill.active{border-color:var(--cyan);color:var(--cyan-bright);background:rgba(95,214,214,0.08);}

  button.calc{
    width:100%;margin-top:6px;
    background:linear-gradient(135deg,var(--gold),#a9843a);
    color:#20170a;border:none;
    font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;
    padding:15px;border-radius:11px;cursor:pointer;letter-spacing:0.3px;
    box-shadow:0 10px 24px -8px rgba(201,164,76,0.5);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  button.calc:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(201,164,76,0.6);}
  button.calc:active{transform:translateY(0px);}

  .note{
    font-size:12px;color:var(--ink-faint);line-height:1.6;margin-top:16px;
    border-top:1px solid var(--line);padding-top:14px;
  }

  /* ---------- Result card ---------- */
  .result-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100%;}
  .result-empty{color:var(--ink-faint);font-size:14px;padding:60px 10px;line-height:1.7;}
  .result-empty .seal-outline{
    width:56px;height:56px;border-radius:50%;border:1.5px dashed var(--line-bright);
    margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
    color:var(--ink-faint);font-family:'Fraunces',serif;font-size:20px;
  }

  .big-pct{
    font-family:'Fraunces',serif;font-weight:600;font-size:64px;line-height:1;
    color:var(--ink);margin:6px 0 2px;
    animation:stampIn .4s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes stampIn{
    0%{transform:scale(0.6) rotate(-8deg);opacity:0;}
    60%{transform:scale(1.08) rotate(2deg);opacity:1;}
    100%{transform:scale(1) rotate(0deg);opacity:1;}
  }
  .big-pct sup{font-size:28px;color:var(--gold-bright);}
  .class-badge{
    display:inline-block;margin-top:10px;padding:6px 16px;border-radius:100px;
    font-size:12.5px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;
    border:1px solid var(--line-bright);color:var(--gold-bright);
    background:rgba(201,164,76,0.1);
  }

  /* ribbon gauge */
  .ribbon{
    width:100%;margin-top:28px;position:relative;
  }
  .ribbon-track{
    height:10px;border-radius:100px;background:rgba(255,255,255,0.06);
    border:1px solid var(--line);overflow:hidden;position:relative;
  }
  .ribbon-fill{
    height:100%;width:0%;border-radius:100px;
    background:linear-gradient(90deg,var(--cyan),var(--gold-bright));
    box-shadow:0 0 16px rgba(95,214,214,0.5);
    transition:width 1s cubic-bezier(.2,.8,.2,1);
  }
  .ribbon-ticks{display:flex;justify-content:space-between;margin-top:8px;}
  .ribbon-ticks span{font-size:10.5px;color:var(--ink-faint);font-weight:700;}

  .formula-box{
    margin-top:24px;width:100%;text-align:left;
    background:rgba(4,8,22,0.5);border:1px solid var(--line);
    border-radius:10px;padding:14px 16px;font-size:12.5px;color:var(--ink-dim);
    line-height:1.6;
  }
  .formula-box b{color:var(--cyan-bright);}
  .formula-box code{
    color:var(--gold-bright);font-family:'Manrope',monospace;
  }

  footer{
    text-align:center;margin-top:56px;color:var(--ink-faint);font-size:12.5px;line-height:1.8;
  }
  footer a{color:var(--gold-bright);text-decoration:none;border-bottom:1px dotted var(--line-bright);}
  footer a:hover{color:var(--cyan-bright);}

/* ---------------- Site-wide Nav ---------------- */
.site-nav{
  max-width:980px;margin:0 auto 36px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.site-nav .brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--ink);
  text-decoration:none;
}
.site-nav .brand .mark{
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #8a6d2c 100%);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#20170a;font-size:13px;flex-shrink:0;
}
.site-nav .brand .sitename{color:var(--ink-dim);font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;display:block;}
.site-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap;}
.site-nav ul a{
  color:var(--ink-dim);text-decoration:none;font-size:13.5px;font-weight:600;
  transition:color .2s ease;
}
.site-nav ul a:hover, .site-nav ul a.active{color:var(--gold-bright);}

/* ---------------- Simple content pages ---------------- */
.page-card{
  max-width:760px;margin:0 auto 40px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:38px 42px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.page-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-bright),transparent);
}
.page-card h1{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(26px,3.6vw,34px);
  margin:0 0 8px;color:var(--ink);
}
.page-card .updated{font-size:12px;color:var(--ink-faint);margin-bottom:28px;text-transform:uppercase;letter-spacing:0.6px;}
.page-card h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:19px;color:var(--gold-bright);
  margin:30px 0 12px;
}
.page-card p, .page-card li{
  color:var(--ink-dim);font-size:15px;line-height:1.75;margin:0 0 14px;
}
.page-card ul, .page-card ol{padding-left:22px;margin:0 0 14px;}
.page-card a{color:var(--cyan-bright);text-decoration:none;border-bottom:1px dotted var(--line-bright);}
.page-card a:hover{color:var(--gold-bright);}
.page-card strong{color:var(--ink);}

/* FAQ accordion */
.faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;background:rgba(4,8,22,0.4);}
.faq-q{
  padding:16px 18px;cursor:pointer;font-weight:700;color:var(--ink);font-size:14.5px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{content:"+";color:var(--gold-bright);font-size:20px;font-weight:400;flex-shrink:0;}
details[open] .faq-q::after{content:"−";}
.faq-a{padding:0 18px 18px;color:var(--ink-dim);font-size:14.5px;line-height:1.7;}

/* Contact */
.contact-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#25d366,#1eb85a);
  color:#06210f;font-weight:800;font-size:14.5px;
  padding:14px 22px;border-radius:11px;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(37,211,102,0.45);
  margin:6px 0 4px;
}
.contact-row{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0;}
.contact-info{
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  background:rgba(4,8,22,0.4);flex:1;min-width:200px;
}
.contact-info .label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.6px;color:var(--ink-faint);font-weight:700;margin-bottom:6px;}
.contact-info .value{font-size:14.5px;color:var(--ink);font-weight:600;}

/* ---------------- Footer ---------------- */
.site-footer{
  max-width:980px;margin:56px auto 0;
  border-top:1px solid var(--line);
  padding-top:36px;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px;
}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-col h3{
  font-family:'Manrope',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:0.8px;
  color:var(--gold-bright);font-weight:800;margin:0 0 14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:var(--ink-dim);text-decoration:none;font-size:13.5px;transition:color .2s ease;}
.footer-col a:hover{color:var(--cyan-bright);}
.footer-col p{color:var(--ink-dim);font-size:13px;line-height:1.7;margin:0;}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:var(--ink-faint);
}
.footer-bottom a{color:var(--ink-faint);text-decoration:none;}
.footer-bottom a:hover{color:var(--gold-bright);}

/* ---------------- Ambient study-motif background ---------------- */
body{overflow-x:hidden;}
.wrap{position:relative;z-index:1;}
.ambient-bg{
  position:fixed;inset:0;overflow:hidden;
  z-index:0;pointer-events:none;
}
.ambient-icon{
  position:absolute;bottom:-10%;
  animation:ambient-float linear infinite;
  color:var(--gold-bright);
  opacity:0;
  will-change:transform,opacity;
}
.ambient-icon svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 0 10px rgba(236,207,128,0.55));
}
.ambient-icon.cyan{color:var(--cyan-bright);}
.ambient-icon.cyan svg{filter:drop-shadow(0 0 10px rgba(143,240,240,0.5));}

@keyframes ambient-float{
  0%{   transform:translateY(10vh) translateX(0) rotate(-8deg);   opacity:0; }
  8%{   opacity:var(--icon-op,0.5); }
  50%{  transform:translateY(-55vh) translateX(30px) rotate(6deg); }
  92%{  opacity:var(--icon-op,0.5); }
  100%{ transform:translateY(-120vh) translateX(-20px) rotate(-7deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ambient-icon{animation:none !important;opacity:0.05 !important;}
}

@media (max-width:700px){
  .ambient-icon{transform:scale(0.8);}
}