/* Abbey — Precision Software. White/red theme with light & dark mode. */
:root{
  --bg:#ffffff;
  --surface:#f6f7f8;
  --text:#16181d;
  --muted:#5b6270;
  --primary:#EC0016;
  --primary-hover:#c50013;
  --border:rgba(0,0,0,0.1);
  --header-bg-1:rgba(255,255,255,0.92);
  --header-bg-2:rgba(255,255,255,0.78);
  --shadow:rgba(0,0,0,0.08);
  --mobile-nav-bg:rgba(255,255,255,0.97);
  --toggle-border:rgba(0,0,0,0.12);
  --base-font-size:16px;
}

[data-theme="dark"]{
  --bg:#111318;
  --surface:#1b1e25;
  --text:#f2f3f5;
  --muted:#9aa0ab;
  --primary:#ff3b4e;
  --primary-hover:#ff5a6b;
  --border:rgba(255,255,255,0.1);
  --header-bg-1:rgba(17,19,24,0.92);
  --header-bg-2:rgba(17,19,24,0.78);
  --shadow:rgba(0,0,0,0.5);
  --mobile-nav-bg:rgba(17,19,24,0.97);
  --toggle-border:rgba(255,255,255,0.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--base-font-size);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color 200ms ease,color 200ms ease;
}
img{max-width:100%;display:block}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,var(--header-bg-1),var(--header-bg-2));backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:30}
.header-inner{max-width:1200px;margin:0 auto;height:76px;display:flex;align-items:center;padding:0 24px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .logo{height:36px}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:inline-block}

.main-nav{flex:1;display:flex;justify-content:flex-start;margin-left:40px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:32px}
.main-nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 4px;border-radius:6px}
.main-nav a.active,.main-nav a:hover{color:var(--primary)}

.header-cta{display:flex;align-items:center;gap:16px}
.btn-contact{background:var(--primary);color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:700;transition:background-color 150ms ease}
.btn-contact:hover{background:var(--primary-hover)}
.btn-github{background:transparent;color:var(--text);padding:9px 18px;border:1px solid var(--toggle-border);border-radius:8px;text-decoration:none;font-weight:700;transition:border-color 150ms ease,color 150ms ease}
.btn-github:hover{color:var(--primary);border-color:var(--primary)}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--toggle-border);background:transparent;color:var(--text);cursor:pointer}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--toggle-border);background:transparent;cursor:pointer}
.nav-toggle .hamburger{display:block;width:18px;height:2px;background:var(--text);position:relative}
.nav-toggle .hamburger:before,.nav-toggle .hamburger:after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--text);transition:transform 220ms ease,top 220ms ease}
.nav-toggle .hamburger:before{top:-6px}
.nav-toggle .hamburger:after{top:6px}
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger:before{transform:rotate(45deg);top:0}
.nav-toggle.open .hamburger:after{transform:rotate(-45deg);top:0}

.mobile-nav{position:fixed;left:0;right:0;top:76px;bottom:0;background:var(--mobile-nav-bg);backdrop-filter:blur(6px);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity 280ms ease,transform 280ms ease;z-index:29}
.mobile-nav.open{opacity:1;pointer-events:auto;transform:none}
.mobile-nav-inner{max-width:900px;margin:24px auto;padding:20px}
.mobile-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.mobile-nav a{font-size:20px;color:var(--text);text-decoration:none;font-weight:700}

/* Sections */
#wrapper{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:64px 0;border-bottom:1px solid var(--border)}
section:last-of-type{border-bottom:none}
.section-row{display:flex;gap:56px;align-items:center}
.section-row > *{flex:1 1 0;min-width:280px}
.section-title{color:var(--primary);font-weight:800;text-transform:uppercase;letter-spacing:0.06em;font-size:0.9rem;margin-bottom:8px}
h1,h2,h3{font-family:inherit}
h2{font-size:2rem;margin:0 0 24px}
h3{font-size:1.15rem;color:var(--text);margin:20px 0 8px}
p{color:var(--muted);line-height:1.6}
ul{color:var(--muted);line-height:1.8;padding-left:20px}
.illustration{background:transparent;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px var(--shadow)}
.section-divider{border:none;border-top:1px solid var(--border);margin:28px 0}

/* Intro / hero */
.intro-copy{text-align:left}
.intro-lead{font-size:2.4rem;line-height:1.15;color:var(--primary);margin:0 0 20px}
.carousel{position:relative;height:320px;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px var(--shadow);background:#f4f4f6}
.carousel-item{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 700ms ease}
.carousel-item.active{opacity:1}

@media(max-width:520px){
  .intro-lead{font-size:1.8rem}
  .carousel{height:220px}
}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:24px 0;text-align:center;font-size:calc(var(--base-font-size) / 2);color:var(--muted)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--primary)}

/* Privacy page */
.privacy-content h3,.privacy-content h4{color:var(--text)}
.privacy-content a{color:var(--primary)}

@media(max-width:860px){
  .section-row{flex-direction:column}
  .section-row > *{flex:none;width:100%}
}
@media(max-width:720px){
  .main-nav,.header-cta .btn-contact,.header-cta .btn-github{display:none}
  .nav-toggle{display:flex}
  .header-inner{padding:0 16px}
}