/*
Theme Name: AT Design
Theme URI: https://atdesign.com
Author: Amber — AT Design
Description: A modern one-page theme for AT Design & Digital Marketing Services. Hardcoded static markup — SEO, Digital Marketing and Graphic Design sections.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: at-design
Tags: one-page, portfolio, business
*/

:root{
  --navy-deep:#232f42;
  --primary:#2c3c56;
  --primary-foreground:#fbfcfe;
  --accent:#43a84a;
  --accent-foreground:#ffffff;
  --background:#fdfdff;
  --foreground:#333f55;
  --muted-foreground:#6b7791;
  --card:#ffffff;
  --secondary:#f2f4f8;
  --border:#e2e6ee;
  --radius:0.625rem;
  --shadow-soft:0 18px 50px -24px rgba(35,47,66,.55);
  --shadow-lift:0 26px 70px -30px rgba(35,47,66,.7);
  --gradient-brand:linear-gradient(120deg,var(--primary),var(--accent));
  --gradient-hero:radial-gradient(1000px 520px at 12% -10%, rgba(67,168,74,.18), transparent),
    linear-gradient(160deg,#232f42,#2c3c56 60%,#28374d);
}

*{box-sizing:border-box;border-color:var(--border)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Sora",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.text-gradient{background-image:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;border-radius:999px;padding:.875rem 1.75rem;font-size:.875rem;font-weight:600;transition:transform .2s,background-color .2s}
.btn-accent{background:var(--accent);color:var(--accent-foreground)}
.btn-accent:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Header */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(226,230,238,.6);
  background:rgba(253,253,255,.85);backdrop-filter:blur(10px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:2.5rem;width:auto}
.brand span{font-size:.875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}
.site-nav{display:flex;align-items:center;gap:1.5rem;font-size:.875rem;font-weight:500;color:var(--muted-foreground)}
.site-nav a:hover{color:var(--primary)}
.site-nav .btn{background:var(--primary);color:var(--primary-foreground);padding:.5rem 1.25rem}
.site-nav .btn:hover{background:var(--accent)}

/* Hero */
.hero{background-image:var(--gradient-hero);color:var(--primary-foreground);overflow:hidden;position:relative}
.hero .wrap{display:grid;gap:3.5rem;padding-top:8rem;padding-bottom:8rem;align-items:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:.375rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.dot{height:.375rem;width:.375rem;border-radius:999px;background:var(--accent)}
.hero h1{margin-top:1.75rem;font-size:2.5rem;line-height:1.05;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{margin-top:1.5rem;max-width:36rem;font-size:1.125rem;color:rgba(255,255,255,.75)}
.hero-actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.stats{margin-top:3.5rem;display:flex;flex-wrap:wrap;gap:2.5rem}
.stats .val{font-size:1.875rem;font-weight:700;color:var(--accent)}
.stats .lbl{margin-top:.25rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero-mark{position:relative;margin:0 auto;width:100%;max-width:24rem}
.hero-mark .glow{position:absolute;inset:-1.5rem;border-radius:2.5rem;background:rgba(255,255,255,.05);filter:blur(20px)}
.hero-mark .card{position:relative;border-radius:2rem;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.95);padding:2.5rem}

/* Services */
.section{padding:6rem 0}
.section h2{margin-top:.75rem;font-size:1.875rem;font-weight:700;max-width:40rem}
.cards{margin-top:3.5rem;display:grid;gap:1.5rem}
.card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);
  border-radius:1rem;padding:2rem;box-shadow:var(--shadow-soft);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card .tag{font-size:.75rem;font-weight:600;letter-spacing:.2em;color:var(--muted-foreground)}
.card h3{margin-top:1rem;font-size:1.5rem;font-weight:700}
.card p{margin-top:.75rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
.card ul{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1.5rem;display:grid;gap:.5rem;font-size:.875rem}
.card li{display:flex;align-items:center;gap:.5rem}

/* About */
.about{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(242,244,248,.6)}
.about .wrap{display:grid;gap:3rem;padding:6rem 1.5rem;align-items:center}
.about h2{margin-top:.75rem;font-size:1.875rem;font-weight:700}
.about p{margin-top:1.5rem;line-height:1.7;color:var(--muted-foreground)}
.facts{display:grid;gap:1rem}
.facts li{border:1px solid var(--border);background:var(--card);border-radius:.75rem;padding:1.25rem 1.5rem}
.facts strong{display:block;color:var(--foreground)}
.facts span{display:block;margin-top:.25rem;font-size:.875rem;color:var(--muted-foreground)}

/* Contact */
.contact-card{background-image:var(--gradient-hero);box-shadow:var(--shadow-lift);border-radius:1.5rem;
  padding:4rem 2rem;text-align:center;color:var(--primary-foreground)}
.contact-card h2{font-size:1.875rem;font-weight:700}
.contact-card p{margin:1rem auto 0;max-width:36rem;color:rgba(255,255,255,.75)}
.contact-card .btn{margin-top:2.25rem}

/* Footer */
.site-footer{border-top:1px solid var(--border)}
.site-footer .wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:2.5rem 1.5rem;font-size:.875rem;color:var(--muted-foreground)}
.site-footer img{height:2.25rem;width:auto}

@media (min-width:640px){
  .hero h1{font-size:3.75rem}
  .section h2,.about h2,.contact-card h2{font-size:2.25rem}
  .contact-card{padding-left:4rem;padding-right:4rem}
  .site-footer .wrap{flex-direction:row;justify-content:space-between}
}
@media (min-width:768px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;padding-top:8rem;padding-bottom:8rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .about .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .site-nav a.navlink,.brand span{display:none}
}