/* ═══════════════════════════════════════════════════
   ARTCORE WEBSYSTEMS – GLOBAL CSS
   Base: Reset, Variables, Fonts, Neumorphic, Text FX
   ═══════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ─── THEME VARIABLES ─── */
:root{
  --bg:#dfe1e5;
  --bg-deep:#d1d3d7;
  --text:#6a6d75;
  --text-heading:#9a9da5;
  --text-muted:#b0b3ba;
  --shadow-light:rgba(255,255,255,.7);
  --shadow-dark:rgba(163,167,175,.5);
  --shadow-light-inset:rgba(255,255,255,.5);
  --shadow-dark-inset:rgba(163,167,175,.35);
  --accent-line:#8b2d2d;
  --t:.6s;
  /* Emboss / Engraved */
  --emboss-color:#f2f2f2;
  --emboss-shadow1:rgba(0,0,0,.28);
  --emboss-shadow2:rgba(0,0,0,.18);
  --emboss-filter:rgba(0,0,0,.14);
  --engraved-color:#ececec;
  --engraved-light:rgba(255,255,255,.6);
  --engraved-dark:rgba(0,0,0,.35);
  --embossed-sub-color:#fefefe;
}

[data-theme="dark"]{
  --bg:#1a1a2e;
  --bg-deep:#151525;
  --text:#7878a0;
  --text-heading:#a0a0c0;
  --text-muted:#45455e;
  --shadow-light:rgba(50,50,80,.3);
  --shadow-dark:rgba(5,5,15,.6);
  --shadow-light-inset:rgba(50,50,80,.2);
  --shadow-dark-inset:rgba(5,5,15,.45);
  --accent-line:#a03030;
  --emboss-color:#2a2a48;
  --emboss-shadow1:rgba(0,0,0,.55);
  --emboss-shadow2:rgba(0,0,0,.35);
  --emboss-filter:rgba(0,0,0,.4);
  --engraved-color:#333355;
  --engraved-light:rgba(100,100,160,.3);
  --engraved-dark:rgba(0,0,0,.6);
  --embossed-sub-color:#2e2e50;
}

/* ─── BODY / TYPOGRAPHY ─── */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  letter-spacing:.04em;
  transition:background var(--t) ease, color var(--t) ease;
  overflow-x:hidden;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}

/* ─── NEUMORPHIC ─── */
.neu{
  background:var(--bg);
  border-radius:18px;
  box-shadow:8px 8px 16px var(--shadow-dark),
             -8px -8px 16px var(--shadow-light);
  transition:all var(--t) ease;
}
.neu:hover{
  box-shadow:4px 4px 8px var(--shadow-dark),
             -4px -4px 8px var(--shadow-light);
}
.neu:active{
  box-shadow:inset 4px 4px 8px var(--shadow-dark-inset),
             inset -4px -4px 8px var(--shadow-light-inset);
}

/* ─── TEXT EFFECTS ─── */
.emboss-70{
  position:relative;
  display:inline-block;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--emboss-color);
  text-shadow:2px 2px 4px var(--emboss-shadow1),
              6px 6px 14px var(--emboss-shadow2);
  filter:drop-shadow(8px 8px 20px var(--emboss-filter));
  transition:color var(--t), text-shadow var(--t), filter var(--t);
}

.embossed-sub{
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--embossed-sub-color);
  text-shadow:.12em .12em .22em var(--emboss-shadow1),
              .28em .28em .55em var(--emboss-shadow2);
  transition:color var(--t), text-shadow var(--t);
}

.engraved-text{
  color:var(--engraved-color);
  text-shadow:0 1px 0 var(--engraved-light),
              0 -1px 0 var(--engraved-dark);
  transition:color var(--t), text-shadow var(--t);
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes flash{
  0%{opacity:.6}
  100%{opacity:0}
}

/* ─── MODE FLASH OVERLAY ─── */
.mode-flash{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:9999;
  pointer-events:none;
  opacity:0;
}
.mode-flash.active{animation:flash .45s ease}

/* ─── BACK TO TOP ─── */
.back-to-top{
  position:fixed;
  bottom:62px;    /* above bottom-bar */
  right:24px;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;
  font-size:.6rem;
  letter-spacing:.1em;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, all var(--t) ease;
  z-index:998;
}
.back-to-top.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ─── RESPONSIVE BASE ─── */
@media(max-width:900px){
  .split-section{grid-template-columns:1fr;gap:3rem;padding:4rem 2rem}
}