@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── LIGHT THEME ── */
:root {
  --g-dark:#166534; --g-main:#16a34a; --g-mid:#22c55e;
  --g-light:#dcfce7; --g-pale:#f0fdf4;
  --bg:#ffffff; --bg-s:#ffffff; --bg-m:#f0fdf4; --bg-c:#ffffff;
  --tx:#0f172a; --tx-m:#374151; --tx-l:#6b7280;
  --bdr:#d1fae5;
  --nav-bg:rgba(255,255,255,.96);
  --foot-bg:#166534;
  --sh-s:0 2px 12px rgba(22,163,74,.08);
  --sh-m:0 8px 32px rgba(22,163,74,.14);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:#0d1117; --bg-s:#161b22; --bg-m:#1a2332; --bg-c:#1e2a3a;
  --tx:#e6edf3; --tx-m:#b0bec5; --tx-l:#7a8fa6;
  --bdr:#2d3748;
  --nav-bg:rgba(13,17,23,.97);
  --foot-bg:#0a1628;
  --sh-s:0 2px 12px rgba(0,0,0,.35);
  --sh-m:0 8px 32px rgba(0,0,0,.5);
  --g-pale:#0d2318; --g-light:#14532d;
}

/* ── ACCESSIBILITY CLASSES ── */
body.acc-contrast { filter:contrast(1.7) brightness(.87) !important; }
body.acc-gray     { filter:grayscale(1) !important; }
body.acc-invert   { filter:invert(1) hue-rotate(180deg) !important; }
body.acc-lh *     { line-height:2 !important; }
body.acc-ls *     { letter-spacing:.09em !important; }
body.acc-ws *     { word-spacing:.2em !important; }
body.acc-dyslexic,body.acc-dyslexic * { font-family:'Comic Sans MS',Arial,sans-serif !important; }
body.acc-adhd,body.acc-adhd section,body.acc-adhd main { background:#fefce8 !important; }
body.acc-links a  { text-decoration:underline !important; text-underline-offset:3px !important; color:#0070f3 !important; font-weight:600 !important; }
body.acc-focus *:focus { outline:3px solid var(--g-main) !important; outline-offset:3px !important; }
body.acc-cursor,body.acc-cursor * { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M10 3L10 32L16 26L23 40L27 37L20 23L31 23Z' fill='%23166534' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") 5 5,auto !important; }
body.acc-noanim *,body.acc-noanim *::before,body.acc-noanim *::after { animation:none !important; transition:none !important; }
body.acc-noimg img,body.acc-noimg figure,body.acc-noimg .orb { display:none !important; }

/* reading guide */
#ge-guide {
  position:fixed; left:0; right:0; height:44px; top:200px;
  z-index:9990; pointer-events:none; display:none;
  background:rgba(22,163,74,.12);
  border-top:2px solid rgba(22,163,74,.5);
  border-bottom:2px solid rgba(22,163,74,.5);
}
body.acc-guide #ge-guide { display:block; }

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--tx); font-size:16px; overflow-x:hidden; transition:background .3s,color .3s; }
h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; color:var(--tx); }
a { text-decoration:none; color:var(--g-main); }
img { max-width:100%; }

/* ── KEYFRAMES ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes dropDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatOrb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse    { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.28)} 50%{box-shadow:0 0 0 8px rgba(22,163,74,0)} }
@keyframes ticker   { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.page-enter   { animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.reveal       { opacity:0; transform:translateY(32px); transition:opacity .6s ease,transform .6s ease; }
.reveal-left  { opacity:0; transform:translateX(-36px); transition:opacity .6s ease,transform .6s ease; }
.reveal-right { opacity:0; transform:translateX(36px);  transition:opacity .6s ease,transform .6s ease; }
.reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:none; }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── NAVBAR ── */
.navbar { background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1.5px solid var(--bdr); padding:0; transition:box-shadow .3s,background .3s; }
.navbar.scrolled { box-shadow:0 4px 24px rgba(22,163,74,.12); }
.navbar-brand { display:flex; align-items:center; gap:10px; padding:12px 0; }
.navbar-brand img { height:44px; border-radius:10px; transition:transform .3s; }
.navbar-brand:hover img { transform:rotate(-5deg) scale(1.08); }
.brand-text { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--g-dark); font-weight:700; line-height:1.2; }
.brand-sub  { font-size:.68rem; font-weight:400; color:var(--tx-l); display:block; }
.nav-link   { font-weight:500; color:var(--tx-m)!important; padding:.65rem 1rem!important; position:relative; transition:color .2s; }
.nav-link::after { content:''; position:absolute; bottom:4px; left:1rem; right:1rem; height:2px; background:var(--g-main); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .25s; }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }
.nav-link:hover,.nav-link.active { color:var(--g-main)!important; }
.dropdown-menu { background:var(--bg-s); border:1.5px solid var(--bdr); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.12); animation:dropDown .2s ease; overflow:hidden; }
.dropdown-item { padding:10px 18px; font-size:.92rem; color:var(--tx-m); transition:background .15s,padding-left .15s; }
.dropdown-item:hover { background:var(--bg-m); color:var(--g-dark); padding-left:24px; }
.sebi-badge { background:var(--bg-m); border:1px solid var(--bdr); font-size:.72rem; color:var(--g-dark); font-weight:600; padding:4px 12px; border-radius:20px; letter-spacing:.04em; animation:pulse 3s ease infinite; }

/* ── HAMBURGER ── */
.hamburger { width:40px; height:40px; cursor:pointer; background:none; border:none; padding:8px; display:flex; flex-direction:column; justify-content:space-between; border-radius:8px; transition:background .2s; flex-shrink:0; }
.hamburger:hover { background:var(--bg-m); }
.hamburger span { display:block; height:2.5px; border-radius:3px; background:var(--g-dark); transform-origin:center; transition:transform .38s cubic-bezier(.23,.67,.32,1),opacity .22s ease,width .28s ease; will-change:transform; }
.hamburger span:nth-child(1){width:100%} .hamburger span:nth-child(2){width:72%} .hamburger span:nth-child(3){width:48%}
.hamburger.open span:nth-child(1){width:100%;transform:translateY(8.75px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);pointer-events:none}
.hamburger.open span:nth-child(3){width:100%;transform:translateY(-8.75px) rotate(-45deg)}

/* ── BUTTONS ── */
.btn-green   { background:var(--g-main); color:#fff; border:none; padding:12px 28px; border-radius:8px; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; transition:background .2s,transform .15s,box-shadow .2s; cursor:pointer; text-decoration:none; }
.btn-green:hover { background:var(--g-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(22,163,74,.35); color:#fff; }
.btn-outline { border:2px solid var(--g-main); color:var(--g-main); padding:11px 24px; border-radius:8px; font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px; transition:all .2s; cursor:pointer; text-decoration:none; }
.btn-outline:hover { background:var(--g-main); color:#fff; transform:translateY(-2px); }

/* ── LAYOUT ── */
.sec { padding:88px 0; }
.sec-title { font-size:clamp(1.7rem,3.5vw,2.4rem); color:var(--tx); }
.sec-sub { color:var(--tx-l); font-size:1.02rem; max-width:560px; line-height:1.75; }
.tag { background:var(--g-light); color:var(--g-dark); font-size:.82rem; font-weight:600; letter-spacing:.06em; padding:5px 14px; border-radius:20px; display:inline-block; margin-bottom:18px; }
.green-line { width:48px; height:3.5px; background:var(--g-main); border-radius:2px; margin:10px 0 18px; }

/* ── SOCIAL ── */
.social-links { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.social-link  { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition:transform .2s,background .2s,box-shadow .2s; text-decoration:none; flex-shrink:0; }
.social-link:hover { transform:translateY(-3px) scale(1.1); }
.social-link.tw{background:#e7f3ff;color:#1da1f2} .social-link.tw:hover{background:#1da1f2;color:#fff;box-shadow:0 4px 14px rgba(29,161,242,.4)}
.social-link.li{background:#e8f0fe;color:#0077b5} .social-link.li:hover{background:#0077b5;color:#fff;box-shadow:0 4px 14px rgba(0,119,181,.4)}
.social-link.yt{background:#fef2f2;color:#ff0000} .social-link.yt:hover{background:#ff0000;color:#fff}
.social-link.tg{background:#e8f5fd;color:#0088cc} .social-link.tg:hover{background:#0088cc;color:#fff}
.social-link.ig{background:#fdf2f8;color:#e1306c} .social-link.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.social-link.wa{background:#f0fdf4;color:#25d366} .social-link.wa:hover{background:#25d366;color:#fff}
.social-link.ft{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)} .social-link.ft:hover{background:var(--g-mid);color:#fff}

/* ── FOOTER ── */
footer { background:var(--foot-bg); color:rgba(255,255,255,.85); padding:56px 0 24px; transition:background .3s; }
footer h6 { color:#fff; font-family:'DM Sans',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin-bottom:16px; }
footer a  { color:rgba(255,255,255,.65); font-size:.88rem; display:block; margin-bottom:8px; transition:color .15s,padding-left .15s; text-decoration:none; }
footer a:hover { color:var(--g-mid); padding-left:4px; }
footer p  { font-size:.87rem; color:rgba(255,255,255,.6); }
.foot-div { border-color:rgba(255,255,255,.12); margin:32px 0 20px; }
.sebi-reg { font-size:.8rem; background:rgba(255,255,255,.08); border-radius:8px; padding:10px 14px; color:rgba(255,255,255,.75); margin-top:14px; line-height:1.7; }

/* ── TABLE ── */
.table-responsive { border-radius:12px; overflow:hidden; border:1.5px solid var(--bdr); }
.table { --bs-table-bg:transparent; color:var(--tx); }
.table thead { background:var(--g-main); color:#fff; }
.table thead th { font-weight:600; font-size:.9rem; padding:13px 16px; border:none; }
.table tbody tr { transition:background .15s; }
.table tbody tr:hover { background:var(--bg-m); }
.table tbody td { padding:11px 16px; font-size:.9rem; vertical-align:middle; border-color:var(--bdr); color:var(--tx); background:var(--bg-c); }
.table-bordered>:not(caption)>*>* { border-color:var(--bdr); }

/* ── MISC ── */
.orb { position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(34,197,94,.14) 0%,transparent 70%); animation:floatOrb 7s ease-in-out infinite; }
.typewriter::after { content:'|'; animation:blink .75s step-end infinite; color:var(--g-main); }
.count-up { display:inline-block; }

/* ── DARK MODE OVERRIDES ── */
[data-theme="dark"] .stat-card,[data-theme="dark"] .srv-card,[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .price-card,[data-theme="dark"] .step-card,[data-theme="dark"] .info-card,
[data-theme="dark"] .val-card,[data-theme="dark"] .disc-card,[data-theme="dark"] .float-badge,
[data-theme="dark"] .form-wrap,[data-theme="dark"] .analyst-card,[data-theme="dark"] .toc,
[data-theme="dark"] .map-wrap,[data-theme="dark"] .t-card-test,[data-theme="dark"] .notice-box
{ background:var(--bg-c)!important; border-color:var(--bdr)!important; }
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select { background:var(--bg-m); border-color:var(--bdr); color:var(--tx); }
[data-theme="dark"] .form-control::placeholder { color:var(--tx-l); }
[data-theme="dark"] section { background:var(--bg)!important; }
[data-theme="dark"] .feat-strip { background:var(--bg-s)!important; border-color:var(--bdr)!important; }
[data-theme="dark"] .hero,[data-theme="dark"] .page-hero { background:var(--bg-m)!important; }
[data-theme="dark"] .cta-sec { background:linear-gradient(135deg,#0a2818,#0d3d20)!important; }
[data-theme="dark"] .ticker-wrap { background:var(--bg-s)!important; }
[data-theme="dark"] .hamburger span { background:var(--tx); }
[data-theme="dark"] .price-card.featured { background:var(--g-dark)!important; }
[data-theme="dark"] .social-link.tw{background:#1a2a3a} [data-theme="dark"] .social-link.li{background:#1a2338}
[data-theme="dark"] .social-link.yt{background:#2a1a1a} [data-theme="dark"] .social-link.tg{background:#1a2a38}
[data-theme="dark"] .social-link.ig{background:#2a1a20} [data-theme="dark"] .social-link.wa{background:#1a2a1a}
@media(max-width:991px){ [data-theme="dark"] .navbar-collapse{background:var(--bg-s);padding:12px;border:1px solid var(--bdr);border-top:none;border-radius:0 0 12px 12px} }

/* ════════════════════════════════════════════
   ACCESSIBILITY PANEL — FIXED BOTTOM RIGHT
   ════════════════════════════════════════════ */
#acc-fab {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  width:56px; height:56px; border-radius:50%;
  background:var(--g-main); color:#fff;
  border:none; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 22px rgba(22,163,74,.55);
  transition:background .2s,transform .25s,box-shadow .2s;
  animation:pulse 3.5s ease infinite;
}
#acc-fab:hover { background:var(--g-dark); transform:scale(1.1) rotate(-8deg); }
#acc-fab:focus-visible { outline:3px solid #fff; outline-offset:3px; }

#acc-panel {
  position:fixed; bottom:96px; right:28px; z-index:9998;
  width:310px; max-height:calc(100vh - 140px);
  background:var(--bg-s); border:1.5px solid var(--bdr);
  border-radius:20px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.96);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);
}
#acc-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }

.acc-head {
  background:var(--g-main); color:#fff;
  padding:13px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.acc-head-left { display:flex; align-items:center; gap:8px; }
.acc-head h6   { margin:0; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.88rem; color:#fff; }
.acc-x { background:rgba(255,255,255,.2); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:background .15s; }
.acc-x:hover { background:rgba(255,255,255,.38); }

.acc-scroll { overflow-y:auto; padding:10px 14px 8px; flex:1; scrollbar-width:thin; scrollbar-color:var(--g-light) transparent; }
.acc-scroll::-webkit-scrollbar { width:4px; }
.acc-scroll::-webkit-scrollbar-thumb { background:var(--g-light); border-radius:4px; }

.acc-sec { font-size:.63rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-l); margin:12px 0 7px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--bdr); padding-bottom:5px; }
.acc-sec i { color:var(--g-main); font-size:.76rem; }

.theme-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:6px; }
.t-card { padding:11px 8px; border-radius:12px; border:2px solid var(--bdr); background:var(--bg-m); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.76rem; font-weight:700; color:var(--tx); transition:all .2s; }
.t-card i { font-size:1.3rem; }
.t-card.light i { color:#f59e0b; } .t-card.dark i { color:#818cf8; }
.t-card:hover { border-color:var(--g-main); transform:translateY(-2px); }
.t-card.active { border-color:var(--g-main); background:var(--g-light); color:var(--g-dark); }

.fs-row { display:flex; align-items:center; gap:8px; background:var(--bg-m); border:1.5px solid var(--bdr); border-radius:11px; padding:6px 10px; margin-bottom:7px; }
.fs-row span { flex:1; text-align:center; font-size:.82rem; font-weight:700; color:var(--tx); }
.fs-btn { width:30px; height:30px; border-radius:8px; border:none; background:var(--bg-c); color:var(--g-dark); font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,transform .15s; box-shadow:var(--sh-s); }
.fs-btn:hover { background:var(--g-light); transform:scale(1.1); }

.sat-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sat-row label { font-size:.74rem; font-weight:600; color:var(--tx-l); white-space:nowrap; }
input[type=range].sat-sl { flex:1; accent-color:var(--g-main); cursor:pointer; }

.acc-tog { width:100%; background:var(--bg-m); border:1.5px solid var(--bdr); border-radius:11px; padding:9px 12px; font-size:.82rem; font-weight:500; color:var(--tx); margin-bottom:6px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background .15s,border-color .15s; text-align:left; }
.acc-tog i { color:var(--g-main); font-size:1rem; flex-shrink:0; min-width:18px; }
.acc-tog .lbl { flex:1; }
.sw { width:36px; height:20px; border-radius:10px; background:var(--bdr); position:relative; flex-shrink:0; transition:background .22s; }
.sw::after { content:''; position:absolute; top:4px; left:4px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .22s cubic-bezier(.22,.61,.36,1); }
.acc-tog.on .sw { background:var(--g-main); }
.acc-tog.on .sw::after { transform:translateX(16px); }
.acc-tog:hover { background:var(--g-light); border-color:var(--g-main); }
.acc-tog.on { border-color:var(--g-main); background:var(--g-pale); }

.tts-row { display:flex; gap:6px; margin-bottom:7px; }
.tts-btn { flex:1; padding:8px 4px; border-radius:10px; border:1.5px solid var(--bdr); background:var(--bg-m); font-size:.74rem; font-weight:600; color:var(--tx); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; transition:all .15s; }
.tts-btn i { font-size:1.1rem; color:var(--g-main); }
.tts-btn:hover { background:var(--g-light); border-color:var(--g-main); }
.tts-btn.playing { background:var(--g-main); border-color:var(--g-main); color:#fff; }
.tts-btn.playing i { color:#fff; }

.sl-row { margin-bottom:7px; }
.sl-row label { font-size:.73rem; font-weight:600; color:var(--tx-l); display:flex; justify-content:space-between; margin-bottom:3px; }
input[type=range].sl { width:100%; accent-color:var(--g-main); cursor:pointer; }

.acc-foot { padding:10px 14px 14px; flex-shrink:0; border-top:1px solid var(--bdr); }
.acc-reset { width:100%; background:transparent; border:1.5px dashed var(--bdr); border-radius:10px; padding:9px; font-size:.8rem; color:var(--tx-l); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; }
.acc-reset i { color:var(--g-main); }
.acc-reset:hover { background:var(--bg-m); border-color:var(--g-main); color:var(--tx); }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .sec { padding:60px 0; }
  #acc-panel { width:calc(100vw - 24px); right:12px; bottom:88px; }
  #acc-fab   { bottom:20px; right:20px; width:50px; height:50px; font-size:20px; }
}
@media(max-width:400px) { #acc-panel { width:calc(100vw - 12px); right:6px; } }