:root{
  --bg:#07070A;
  --surface:#121212;
  --surface-2:#1B1B1B;
  --border:#2A2A2A;
  --text:#F2F0EA;
  --muted:#9C9890;
  --brand:#FFB80C;
  --brand-2:#FFCB4D;
  --brand-3:#C98A00;
}
[data-theme="light"]{
  --bg:#FBF8F0;
  --surface:#FFFFFF;
  --surface-2:#F3ECD8;
  --border:#EDE3C8;
  --text:#2A2216;
  --muted:#7A6F55;
  --brand:#FFB80C;
  --brand-2:#FFCB4D;
  --brand-3:#C98A00;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 900px 500px at 8% 0%, rgba(255,184,12,.12), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 15%, rgba(212,175,55,.1), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(232,199,102,.08), transparent 60%);
  background-attachment:fixed;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}

/* ===== Light-theme overrides for hardcoded Tailwind utility colors ===== */
[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(to right, rgba(45,27,78,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,27,78,0.05) 1px, transparent 1px);
}
[data-theme="light"] .glow-orb{ opacity:.12; }
[data-theme="light"] .text-white{ color:#2A2216 !important; font-weight: 600; }
[data-theme="light"] .text-slate-200{ color:#392E1D !important; }
[data-theme="light"] .text-slate-300{ color:#493B24 !important; }
[data-theme="light"] .text-slate-400{ color:#6E5F3F !important; }
[data-theme="light"] .text-slate-500{ color:#7A6B4A !important; }
[data-theme="light"] .bg-white\/5{ background:rgba(255,184,12,.04) !important; }
[data-theme="light"] .bg-white\/10{ background:rgba(255,184,12,.08) !important; }
[data-theme="light"] .border-white\/10{ border-color:rgba(255,184,12,.12) !important; }
[data-theme="light"] .bg-\[\#0A0906\]{ background:#F3ECD8 !important; }
[data-theme="light"] .text-emerald-300{ color:#059669 !important; }
[data-theme="light"] .text-emerald-400{ color:#059669 !important; }
[data-theme="light"] .text-rose-300{ color:#E11D48 !important; }
[data-theme="light"] .text-rose-400{ color:#E11D48 !important; }
[data-theme="light"] .text-amber-300{ color:#B45309 !important; }
[data-theme="light"] .text-amber-400{ color:#B45309 !important; }
[data-theme="light"] .glass{
  background:linear-gradient(180deg, rgba(255,184,12,0.04), rgba(255,184,12,0.02));
}
[data-theme="light"] ::-webkit-scrollbar-track{ background:var(--bg); }
[data-theme="light"] .btn-ghost:hover{ background:rgba(255,184,12,.12); }
[data-theme="light"] table.data-table td{ border-bottom-color:rgba(14,21,36,.08); }
[data-theme="light"] table.data-table tr:hover td{ background:rgba(14,21,36,.02); }
[data-theme="light"] .prose-invert :is(h1,h2,h3,h4){ color:var(--text); }
[data-theme="light"] .caret{ background:var(--brand-2); }

/* Hero — bright "coding at home" photo background, consistent across themes */
#hero{
  background:
    linear-gradient(180deg, rgba(6,10,20,.68) 0%, rgba(6,10,20,.5) 45%, rgba(6,10,20,.82) 100%),
    url('https://images.pexels.com/photos/13432327/pexels-photo-13432327.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat; background-size: cover !important;
}
[data-theme="light"] #hero{
  background:
    linear-gradient(180deg, rgba(6,10,20,.68) 0%, rgba(6,10,20,.5) 45%, rgba(6,10,20,.82) 100%),
    url('https://images.pexels.com/photos/13432327/pexels-photo-13432327.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat; background-size: cover !important;
}
[data-theme="light"] #hero .text-white{ color:#fff !important; }
[data-theme="light"] #hero .text-slate-400{ color:#DCE2EF !important; }
[data-theme="light"] #hero .text-slate-500{ color:#B9C2D6 !important; }
[data-theme="light"] #hero span.bg-white\/5{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:none;
}
[data-theme="light"] #hero .glass{
  background:rgba(10,15,26,.6);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}
[data-theme="light"] #hero .marquee-track,
[data-theme="light"] #hero .border-white\/10{ border-color:rgba(255,255,255,.14) !important; color:#DCE2EF; }
/* Ghost button always readable over the hero photo, in either theme */
#hero .btn-ghost{
  color:#fff !important;
  border-color:rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.06);
}
#hero .btn-ghost:hover{
  background:rgba(255,255,255,.16) !important;
  border-color:#fff !important;
}

/* Theme toggle button */
.theme-toggle{
  position:relative; width:2.4rem; height:2.4rem; border-radius:9999px;
  border:1px solid var(--border); background:var(--surface-2);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer; transition:border-color .2s ease, background .2s ease;
  flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--brand); }
.theme-toggle svg{ width:1.15rem; height:1.15rem; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
.font-display{font-family:'Space Grotesk',sans-serif;}

/* Grid + glow backdrop */
.bg-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:44px 44px;
}
.glow-orb{
  position:absolute; border-radius:9999px; filter:blur(90px); opacity:.35; pointer-events:none;
}

/* Gradient text */
.text-gradient{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Signature bracket mark (legacy, kept for compatibility) */
.bracket-mark{font-family:'Space Grotesk',monospace; font-weight:700; letter-spacing:-1px;}
.bracket-mark .slash{color:var(--brand-2);}
.bracket-mark .bkt{color:var(--brand);}

/* Brand logo mark */
.logo-icon{
  width:2.4rem; height:2.4rem; border-radius:9999px; object-fit:cover;
  border:1px solid var(--border); flex-shrink:0;
}

/* Opay-style bouncing logo preloader */
.page-loader{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .4s ease, visibility .4s ease;
  animation:loader-autohide .01s linear 3.2s forwards;
}
.page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-autohide{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.loader-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:6rem; height:8.5rem;
}
.loader-logo{
  width:4.5rem; height:4.5rem; border-radius:9999px; object-fit:cover;
  border:2px solid var(--border); box-shadow:0 10px 26px -6px rgba(255,184,12,.5);
  animation:loader-bounce 1s cubic-bezier(.55,0,.45,1) infinite;
}
.loader-shadow{
  width:3rem; height:.55rem; border-radius:9999px; margin-top:.7rem;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 72%);
  animation:loader-shadow 1s cubic-bezier(.55,0,.45,1) infinite;
}
[data-theme="light"] .loader-shadow{
  background:radial-gradient(ellipse at center, rgba(14,21,36,.25), transparent 72%);
}
.loader-label{
  margin-top:1.1rem; font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:600;
  letter-spacing:.04em; color:var(--muted); text-align:center;
}
@keyframes loader-bounce{
  0%,100%{ transform:translateY(0) scale(1,1); }
  40%{ transform:translateY(-30px) scale(1,1); }
  50%{ transform:translateY(-34px) scale(1.02,.98); }
  60%{ transform:translateY(-30px) scale(1,1); }
  92%{ transform:translateY(0) scale(1.12,.86); }
}
@keyframes loader-shadow{
  0%,100%{ transform:scale(1); opacity:.5; }
  50%{ transform:scale(.5); opacity:.2; }
}

/* Glass card */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.card-hover{transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;}
.card-hover:hover{transform:translateY(-6px); border-color:rgba(255,184,12,.55); box-shadow:0 20px 60px -20px rgba(255,184,12,.35);}

/* Buttons */
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  color:#fff; font-weight:600; transition:filter .25s ease, transform .25s ease;
}
.btn-primary:hover{filter:brightness(1.12); transform:translateY(-1px);}
.btn-ghost{
  border:1px solid var(--border); color:var(--text); transition:all .25s ease;
}
.btn-ghost:hover{border-color:var(--brand); background:rgba(255,184,12,.08);}

/* Nav link underline */
.nav-link{position:relative;}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Typing caret blink for hero code line */
.caret{display:inline-block; width:8px; height:1em; vertical-align:-2px; background:var(--brand-2); margin-left:2px; border-radius:1px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

/* Bouncing "thinking" dots shown between typed code snippets */
.typing-dots{display:inline-flex; align-items:center; gap:4px; height:1em;}
.typing-dots span{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--brand-2); animation:dotBounce 1s infinite ease-in-out;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0); opacity:.4;} 40%{transform:translateY(-5px); opacity:1;}}

/* Marquee for tech / trust strip */
.marquee-track{display:flex; gap:3rem; animation:marquee 28s linear infinite; white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Floating animation for hero card */
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
.float{animation:floaty 6s ease-in-out infinite;}

/* Skeleton loader */
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite;}
@keyframes shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:8px;}

/* Toast */
#toast-container{position:fixed; top:1rem; right:1rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem;}
.toast{padding:.85rem 1.1rem; border-radius:.6rem; font-size:.875rem; font-weight:500; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); animation:toastIn .3s ease;}
.toast.success{background:#0f2a1e; border:1px solid #1f7a4d; color:#8ef2c1;}
.toast.error{background:#2a0f14; border:1px solid #7a1f2f; color:#f28e9c;}
.toast.info{background:var(--surface-2); border:1px solid var(--border); color:var(--text);}
@keyframes toastIn{from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:translateX(0)}}

/* Modal */
.modal-backdrop{background:rgba(3,6,12,.72); backdrop-filter:blur(4px);}

.clamp-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.clamp-3{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}

/* Table */
table.data-table{width:100%; border-collapse:collapse; font-size:.875rem;}
table.data-table th{text-align:left; color:var(--muted); font-weight:600; padding:.65rem .85rem; border-bottom:1px solid var(--border);}
table.data-table td{padding:.65rem .85rem; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top;}
table.data-table tr:hover td{background:rgba(255,255,255,.02);}

/* Progress bar */
.progress-track{background:var(--surface-2); border-radius:999px; overflow:hidden; height:8px;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .5s ease;}

/* Status badge */
.badge{padding:.2rem .6rem; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;}

/* Admin form controls */
.form-label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:.35rem; font-weight:500;}
.form-input{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:.6rem .8rem; color:var(--text); font-size:.9rem;}
.form-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,184,12,.15);}

/* Blog article content */
.prose-invert{overflow-wrap:break-word; word-break:break-word; max-width:100%;}
.prose-invert :is(h1,h2,h3,h4){font-family:'Space Grotesk',sans-serif; color:#fff; font-weight:600; margin-top:1.6em; margin-bottom:.6em; overflow-wrap:break-word;}
.prose-invert p{margin-bottom:1.1em;}
.prose-invert a{color:var(--brand-2); text-decoration:underline; overflow-wrap:break-word;}
.prose-invert ul,.prose-invert ol{margin:1em 0 1em 1.4em;}
.prose-invert li{margin-bottom:.4em;}
.prose-invert img,.prose-invert video,.prose-invert iframe{max-width:100%; height:auto; border-radius:.75rem; margin:1.4em 0;}
.prose-invert table{display:block; max-width:100%; overflow-x:auto; border-collapse:collapse;}
.prose-invert blockquote{border-left:3px solid var(--brand); padding-left:1rem; color:var(--muted); font-style:italic; margin:1.4em 0;}
.prose-invert code{background:var(--surface-2); padding:.15em .4em; border-radius:.3em; font-size:.9em; overflow-wrap:break-word;}
.prose-invert pre{background:var(--surface-2); padding:1em; border-radius:.6em; overflow-x:auto; max-width:100%; margin:1.4em 0;}
.prose-invert pre code{background:none; padding:0; white-space:pre;}



/* ===== Mobile nav — slide-in drawer from right ===== */
.mobile-menu-overlay{
  position:fixed; inset:0; z-index:70;
  background:var(--surface);
  opacity:0; transition:opacity .3s ease;
}
.mobile-menu-overlay.open{ opacity:1; }
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:80;
  width:100%; max-width:none; height:100%;
  padding:1.5rem 1.5rem 2rem;
  overflow-y:auto;
  background:var(--surface);
  border-left:none;
  box-shadow:none;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.mobile-menu.open{ transform:translateX(0); }
body.menu-open{ overflow:hidden; }
@media (min-width:1024px){
  .mobile-menu, .mobile-menu-overlay{ display:none !important; }
}

/* =====================================================================
   KPWD 2026 REBRAND — premium light-first design layer
   Overrides only. Structure, classes and behaviour are unchanged.
   ===================================================================== */

:root{
  --brand:#FFB80C;
  --brand-2:#FFCB4D;
  --brand-3:#C98A00;
  --ink:#0A0C10;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-xs:0 1px 2px rgba(10,12,16,.05);
  --shadow-sm:0 2px 8px -2px rgba(10,12,16,.07), 0 1px 2px rgba(10,12,16,.04);
  --shadow-md:0 18px 40px -24px rgba(10,12,16,.22), 0 2px 8px -4px rgba(10,12,16,.08);
  --shadow-lg:0 40px 90px -50px rgba(10,12,16,.38), 0 8px 24px -18px rgba(10,12,16,.16);
}

[data-theme="light"]{
  --bg:#FAF6EC;
  --surface:#FFFFFF;
  --surface-2:#F3EEDF;
  --border:#E7DFC8;
  --text:#0A0C10;
  --muted:#5C6473;
}
[data-theme="dark"], :root:not([data-theme="light"]){
  --bg:#080A0F;
  --surface:#0E1118;
  --surface-2:#141924;
  --border:#222836;
  --text:#EDF0F6;
  --muted:#8E97A9;
}

body{ font-family:var(--font-body); letter-spacing:0.005em; -webkit-font-smoothing:antialiased; }
.font-display{ font-family:var(--font-display); letter-spacing:-0.008em; }
h1,h2,h3{ letter-spacing:-0.01em; }

/* Soft, luminous page canvas instead of heavy colour washes */
[data-theme="light"] body{
  background-image:
    radial-gradient(1100px 620px at 12% -6%, rgba(255,184,12,.055), transparent 62%),
    radial-gradient(900px 560px at 96% 6%, rgba(91,61,245,.045), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(14,158,150,.04), transparent 62%);
  background-attachment:fixed;
}
[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(to right, rgba(10,12,16,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,12,16,.032) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 78%);
}
[data-theme="light"] .glow-orb{ opacity:.12; filter:blur(120px); }

/* ---- Type colour mapping (light) ---- */
[data-theme="light"] .text-white{ color:var(--ink) !important; font-weight:inherit; }
[data-theme="light"] .text-slate-200{ color:#1A1F29 !important; }
[data-theme="light"] .text-slate-300{ color:#2C3340 !important; }
[data-theme="light"] .text-slate-400{ color:var(--muted) !important; }
[data-theme="light"] .text-slate-500{ color:#78808F !important; }

/* ---- Hero: bright, editorial, generous ---- */
#hero, [data-theme="light"] #hero{
  background:
    radial-gradient(1200px 700px at 50% -18%, rgba(255,184,12,.10), transparent 64%),
    radial-gradient(760px 520px at 88% 8%, rgba(91,61,245,.09), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%, #FBFCFE 62%, #FFFFFF 100%) !important;
}
[data-theme="dark"] #hero{
  background:
    radial-gradient(1200px 700px at 50% -18%, rgba(255,184,12,.22), transparent 64%),
    linear-gradient(180deg,#0A0D14 0%, #080A0F 100%) !important;
}
[data-theme="light"] #hero .text-white{ color:var(--ink) !important; }
[data-theme="light"] #hero .text-slate-400{ color:var(--muted) !important; }
[data-theme="light"] #hero .text-slate-500{ color:#78808F !important; }
[data-theme="light"] #hero span.bg-white\/5{
  background:rgba(255,184,12,.05) !important;
  border-color:rgba(255,184,12,.14) !important;
  color:var(--ink);
}
[data-theme="light"] #hero .glass{
  background:rgba(255,255,255,.86);
  border-color:var(--border);
  box-shadow:var(--shadow-lg);
  backdrop-filter:saturate(1.4) blur(14px);
}
[data-theme="light"] #hero .marquee-track,
[data-theme="light"] #hero .border-white\/10{ border-color:var(--border) !important; color:#8A92A1; }
#hero .btn-ghost, [data-theme="light"] #hero .btn-ghost{
  color:var(--text) !important;
  border-color:var(--border) !important;
  background:rgba(255,255,255,.7);
}
[data-theme="light"] #hero .btn-ghost:hover{
  background:#fff !important; border-color:rgba(255,184,12,.4) !important;
}
#hero h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.18; letter-spacing:-.015em; }
#hero h1 em, .serif-accent{ font-family:var(--font-serif); font-style:italic; letter-spacing:-.01em; }

/* ---- Surfaces / cards ---- */
[data-theme="light"] .glass{
  background:#FFFFFF;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
}
[data-theme="light"] .bg-white\/5{ background:#FBF8F0 !important; }
[data-theme="light"] .bg-white\/10{ background:#F2F4F7 !important; }
[data-theme="light"] .border-white\/10{ border-color:var(--border) !important; }
[data-theme="light"] .bg-\[\#0A0906\]{ background:#FBF8F0 !important; }
.card-hover{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s ease; }
.card-hover:hover{ transform:translateY(-6px); border-color:rgba(255,184,12,.22); box-shadow:var(--shadow-lg); }

/* ---- Buttons ---- */
.btn-primary{
  background:var(--ink);
  color:#fff !important; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease;
  position:relative; overflow:hidden;
}
.btn-primary:hover{ background:var(--brand); border-color:var(--brand); filter:none; transform:translateY(-2px); box-shadow:0 18px 34px -18px rgba(255,184,12,.7); }
.btn-primary:active{ transform:translateY(0); }
[data-theme="dark"] .btn-primary{ background:#fff; color:var(--ink) !important; border-color:#fff; }
[data-theme="dark"] .btn-primary:hover{ background:var(--brand); color:#fff !important; border-color:var(--brand); }
.btn-ghost{
  border:1px solid var(--border); color:var(--text); background:transparent; font-weight:600;
  transition:border-color .3s ease, background .3s ease, transform .35s var(--ease);
}
.btn-ghost:hover{ border-color:rgba(255,184,12,.45); background:rgba(255,184,12,.04); transform:translateY(-2px); }
.btn-primary:focus-visible, .btn-ghost:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:.5rem;
}

/* ---- Header ---- */
[data-theme="light"] #site-header .glass{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(1.6) blur(16px);
  border-color:rgba(10,12,16,.07);
  box-shadow:0 10px 30px -26px rgba(10,12,16,.5);
}
.nav-link::after{ height:1.5px; background:var(--ink); }
[data-theme="dark"] .nav-link::after{ background:#fff; }

/* ---- Eyebrow labels ---- */
.text-\[var\(--brand-2\)\].uppercase{ color:var(--brand) !important; letter-spacing:.14em; }

/* ---- Forms ---- */
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select{
  background:#fff; border-color:var(--border); border-radius:.7rem;
}
input, textarea, select{ transition:border-color .25s ease, box-shadow .25s ease; }
input:focus, textarea:focus, select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,184,12,.1); }

/* ---- Loader / misc polish ---- */
.loader-logo{ border-color:var(--border); box-shadow:0 18px 40px -18px rgba(255,184,12,.45); }
.loader-label{ font-family:var(--font-display); letter-spacing:.02em; }
.text-gradient{ background:linear-gradient(100deg,var(--brand),var(--brand-3) 60%,var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#D8DCE4; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#C2C8D2; }
.reveal{ transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-theme="light"] .toast.info{ background:#fff; box-shadow:var(--shadow-md); }
[data-theme="light"] .modal-backdrop{ background:rgba(10,12,16,.4); }
img{ }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Reading rhythm */
body{ letter-spacing:0.005em; }
p{ line-height:1.72; }
[data-theme="dark"] #hero .btn-ghost{ background:transparent !important; border-color:rgba(255,255,255,.22) !important; color:#EDF0F6 !important; }
[data-theme="dark"] #hero .btn-ghost:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.45) !important; }

/* =====================================================================
   KPWD — COUTURE LAYER v2 : editorial luxury refinement
   Pure presentation. No structural or behavioural changes.
   ===================================================================== */

:root{
  --ink:#08090C;
  --accent:#FFB80C;
  --hairline:rgba(8,9,12,.08);
  --ease-lux:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{ --hairline:rgba(255,255,255,.08); }

/* --- Typographic scale: bigger, tighter, more confident --- */
h1,.font-display{ font-weight:700; }
h1{ letter-spacing:-.015em; line-height:1.2; }
h2{ letter-spacing:-.012em; line-height:1.22; }
h3{ letter-spacing:-.008em; }
section h2.font-display, main h2.font-display{
  font-size:clamp(2rem,4.2vw,3.5rem);
}
p{ line-height:1.75; }
.max-w-2xl p, main > p{ font-size:1.0625rem; }

/* Editorial serif accent for emphasised words in headings */
h1 em, h2 em, h3 em{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:-.015em; padding-right:.04em;
}

/* --- Eyebrows become refined hairline labels --- */
span.uppercase.tracking-widest{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.6875rem; letter-spacing:.18em; font-weight:600;
  color:var(--muted) !important;
}
span.uppercase.tracking-widest::before{
  content:""; width:1.75rem; height:1px; background:currentColor; opacity:.55;
}

/* --- Generous rhythm --- */
main section, main > div[class*="mt-2"]{ scroll-margin-top:6rem; }
@media (min-width:1024px){
  section.py-16{ padding-top:6.5rem; padding-bottom:6.5rem; }
  .mt-24{ margin-top:8rem; }
}

/* --- Surfaces: quieter, crisper, more expensive --- */
[data-theme="light"] .glass{
  background:#FFFFFF;
  border:1px solid var(--hairline);
  box-shadow:0 1px 2px rgba(8,9,12,.03);
  border-radius:1.25rem;
}
[data-theme="light"] .glass:hover{ box-shadow:0 24px 60px -40px rgba(8,9,12,.35); }
[data-theme="dark"] .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--hairline);
}
.rounded-2xl{ border-radius:1.25rem; }
.rounded-3xl{ border-radius:1.75rem; }
.card-hover:hover{ transform:translateY(-4px); border-color:var(--hairline); }

/* --- Buttons: pill-precise, monochrome-first --- */
.btn-primary,.btn-ghost{ border-radius:999px; font-size:.9375rem; }
.btn-primary{ box-shadow:none; }
.btn-primary:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px);
  box-shadow:0 22px 40px -24px rgba(8,9,12,.55); }
[data-theme="light"] .btn-ghost{ background:#fff; border-color:var(--hairline); }
.btn-ghost:hover{ background:transparent; border-color:var(--ink); }

/* --- Links: elegant underline reveal --- */
main a:not(.btn-primary):not(.btn-ghost):not([class*="rounded"]):hover{ color:var(--ink); }

/* --- Hero: quieter canvas, larger headline, more air --- */
[data-theme="light"] #hero{
  background:
    radial-gradient(1000px 620px at 50% -22%, rgba(255,184,12,.055), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#FCFCFD 70%,#FFFFFF 100%) !important;
}
#hero h1{ font-size:clamp(2.6rem,6.6vw,5.2rem); letter-spacing:-.018em; }
#hero p{ font-size:clamp(1rem,1.25vw,1.1875rem); max-width:34rem; }
[data-theme="light"] .glow-orb{ opacity:.07; }
[data-theme="light"] .bg-grid{ opacity:.5; }

/* --- Header: thinner, calmer --- */
[data-theme="light"] #site-header .glass{
  background:rgba(255,255,255,.72);
  border-color:var(--hairline);
  box-shadow:none;
  border-radius:999px;
}
.nav-link{ font-size:.9375rem; letter-spacing:0; }

/* --- Hairline separators instead of boxes --- */
[data-theme="light"] .border-white\/10,[data-theme="light"] .border-t,[data-theme="light"] .border-b{
  border-color:var(--hairline) !important;
}

/* --- Media treatment --- */
main img:not(.loader-logo):not([class*="w-8"]):not([class*="h-8"]){
  border-radius:1rem;
}

/* --- Motion: slower, more deliberate --- */
.reveal{ transform:translateY(22px); transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }
.card-hover,.btn-primary,.btn-ghost{ transition-timing-function:var(--ease-lux); }

/* --- Footer refinement --- */
[data-theme="light"] #site-footer{ background:#FFFFFF; border-top:1px solid var(--hairline); }
#site-header a[href="/"], #site-header a[href="index.html"]{ white-space:nowrap; }
#site-header .glass{ padding-left:1.25rem; padding-right:.5rem; }

/* ================= Premium Auth Pages ================= */
.auth-shell{min-height:100vh; display:grid; grid-template-columns:1fr;}
@media (min-width:1024px){ .auth-shell{grid-template-columns:1.05fr .95fr;} }
.auth-aside{display:none; position:relative; overflow:hidden; padding:4rem 4.5rem; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg,#0A0C10 0%,#111726 55%,#0A0C10 100%); color:#fff;}
@media (min-width:1024px){ .auth-aside{display:flex;} }
.auth-aside::after{content:""; position:absolute; inset:0;
  background:radial-gradient(600px 400px at 15% 10%, rgba(255,184,12,.28), transparent 60%),
             radial-gradient(500px 380px at 90% 85%, rgba(124,92,255,.22), transparent 60%);}
.auth-aside > *{position:relative; z-index:1;}
.auth-eyebrow{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.auth-quote{font-family:'Instrument Serif',Georgia,serif; font-size:clamp(2rem,3vw,2.9rem); line-height:1.15; letter-spacing:-.02em; color:#fff;}
.auth-quote em{font-style:italic; color:#9EC1FF;}
.auth-points{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.85rem;}
.auth-points li{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:rgba(255,255,255,.72);}
.auth-points li span{color:#7FE7C4;}
.auth-main{display:flex; align-items:center; justify-content:center; padding:5.5rem 1.5rem 3.5rem; background:var(--bg);}
.auth-card{width:100%; max-width:26.5rem;}
.auth-card h1{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.7rem,3.2vw,2.15rem); color:var(--text); margin:.9rem 0 .35rem;}
.auth-card .auth-sub{color:var(--muted); font-size:.95rem; margin:0 0 2rem;}
.auth-field{margin-bottom:1.05rem;}
.auth-field label{display:block; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.45rem;}
.auth-field input{width:100%; height:3.15rem; padding:0 1rem; font-size:.95rem; font-family:inherit;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:.9rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
[data-theme="light"] .auth-field input{background:#FBFCFE;}
.auth-field input::placeholder{color:var(--muted); opacity:.7;}
.auth-field input:focus{outline:none; background:var(--bg); border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,184,12,.14);}
.auth-field.has-toggle{position:relative;}
.auth-field.has-toggle input{padding-right:3.6rem;}
.auth-toggle{position:absolute; right:.55rem; bottom:.55rem; height:2.05rem; padding:0 .7rem;
  border:none; background:transparent; color:var(--muted); font-size:.75rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:.6rem;}
.auth-toggle:hover{color:var(--brand);}
.auth-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem;}
.auth-submit{width:100%; height:3.25rem; margin-top:.6rem; border-radius:999px; border:1px solid transparent;
  background:#0A0C10; color:#fff; font-weight:700; font-size:.95rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, opacity .2s ease;}
.auth-submit:hover{transform:translateY(-2px); box-shadow:0 22px 40px -24px rgba(8,9,12,.6);}
.auth-submit:disabled{opacity:.6; cursor:not-allowed; transform:none;}
[data-theme="dark"] .auth-submit{background:#fff; color:#0A0C10;}
.auth-meta{margin-top:1.6rem; text-align:center; font-size:.875rem; color:var(--muted);}
.auth-meta a{color:var(--brand); font-weight:600;}
.auth-meta a:hover{text-decoration:underline;}
.auth-divider{margin:1.75rem 0 0; border-top:1px solid var(--border);}
.auth-back{display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-size:.8rem; color:var(--muted);}
.auth-back:hover{color:var(--text);}
.auth-badge{display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:.4rem .85rem;}

/* ===== Enhanced Animations & Interactions ===== */
@keyframes slideInDown{
  from{ opacity:0; transform:translateY(-20px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes slideInRight{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes pulse-soft{
  0%, 100%{ opacity:1; }
  50%{ opacity:.8; }
}
@keyframes glow-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,184,12,.4); }
  70%{ box-shadow:0 0 0 10px rgba(255,184,12,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,184,12,0); }
}

/* Navigation dropdown improvements */
nav .group:hover .glass{
  animation:slideInDown .3s cubic-bezier(.16,.1,.3,1);
  opacity:1 !important;
  visibility:visible !important;
}
nav .glass{
  transition:all .25s ease;
  box-shadow:0 10px 30px -5px rgba(0,0,0,.2);
}
[data-theme="light"] nav .glass{
  box-shadow:0 8px 24px -4px rgba(255,184,12,.15);
}

/* Button animations */
.btn-primary, .btn-ghost{
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(.34,.1,.64,1);
}
.btn-primary:hover, .btn-ghost:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -6px rgba(0,0,0,.15);
}
[data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-ghost:hover{
  box-shadow:0 12px 24px -6px rgba(255,184,12,.2);
}

/* Card hover effect */
.card-hover{
  transform-origin:center;
  perspective:1000px;
}
.card-hover:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 40px -12px rgba(0,0,0,.2);
}
[data-theme="light"] .card-hover:hover{
  box-shadow:0 20px 40px -12px rgba(255,184,12,.18);
}

/* Section entrance animation */
section{
  animation:fadeInUp .6s ease-out;
}

/* Dropdown active states */
.group-hover\:block{
  animation:slideInDown .25s ease-out;
}

/* Links smooth interaction */
a{
  transition:color .2s ease, border-color .2s ease;
}

/* Mobile menu improvements */
@media (max-width:1023px){
  nav{
    animation:slideInDown .3s ease-out;
  }
  .mobile-menu-item{
    transition:all .2s ease;
  }
  .mobile-menu-item:hover{
    background:rgba(255,184,12,.1);
    padding-left:1.25rem;
  }
}

/* Improve focus states for accessibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Desktop responsiveness - prevent nav slug */
@media (min-width:1024px){
  nav{
    display:flex !important;
  }
  .nav-link{
    position:relative;
    padding:0.4rem 0.8rem;
  }
  .nav-link::after{
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:0;
    height:2px;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    transition:width .3s ease;
  }
  .nav-link:hover::after, .nav-link.active::after{
    width:100%;
  }
}

/* ===== Image-based Cards =====
   Scoped away from .logo-icon / .loader-logo: without the :not() exclusions
   these generic rules also matched the header logo (it sits inside a
   .glass.rounded-2xl container), forcing it to width:100% with a 16:9 crop
   and blowing it up over the nav. */
.glass img:not(.logo-icon):not(.loader-logo):not(.avatar){
  display:block;
  width:100%;
  height:auto;
}
.glass.rounded-2xl img:not(.logo-icon):not(.loader-logo):not(.avatar){
  border-radius:.5rem .5rem 0 0;
  object-fit:cover;
  aspect-ratio:16/9;
}
.glass.card-hover img:not(.logo-icon):not(.loader-logo):not(.avatar){
  transition:transform .4s cubic-bezier(.16,.1,.3,1), filter .3s ease;
}
.glass.card-hover:hover img:not(.logo-icon):not(.loader-logo):not(.avatar){
  transform:scale(1.08);
  filter:brightness(.9);
}
[data-theme="light"] .glass.card-hover:hover img:not(.logo-icon):not(.loader-logo):not(.avatar){
  filter:brightness(.95);
}
/* Avatars (team/testimonial/review profile photos) are excluded above so their
   own w-*/h-*/rounded-full utility classes control size, keeping them as normal
   circular profile photos instead of full-width card images. */

/* Image + text card layout */
.glass.rounded-2xl.overflow-hidden{
  display:flex;
  flex-direction:column;
}
.glass.rounded-2xl.overflow-hidden > div{
  flex:1;
}

/* Responsive image heights */
@media (max-width:640px){
  .glass.rounded-2xl img:not(.avatar){
    aspect-ratio:16/10;
  }
}

/* Image fade-in on load */
img{
  animation:fadeInUp .5s ease-out;
}

/* Floating WhatsApp button */
.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:56px; height:56px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 36px -8px rgba(0,0,0,.4); }
@media (max-width:640px){ .wa-float{ right:1rem; bottom:1rem; width:52px; height:52px; } }

/* ===== Final authoritative CTA button styling: brand gold primary/secondary ===== */
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-3)) !important;
  color:#1A1200 !important;
  border-color:var(--brand) !important;
  box-shadow:0 10px 26px -10px rgba(255,184,12,.55) !important;
}
.btn-primary:hover{
  background:linear-gradient(90deg,var(--brand-2),var(--brand)) !important;
  border-color:var(--brand-2) !important;
  box-shadow:0 16px 34px -12px rgba(255,184,12,.7) !important;
  transform:translateY(-2px);
}
.btn-ghost{
  background:transparent !important;
  border-color:var(--brand-3) !important;
  color:var(--text) !important;
}
.btn-ghost:hover{
  background:rgba(255,184,12,.1) !important;
  border-color:var(--brand) !important;
}