*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --color-primary:#181d26;
  --color-primary-active:#0d1218;
  --color-canvas:#ffffff;
  --color-surface-soft:#f8fafc;
  --color-surface-strong:#e0e2e6;
  --color-surface-dark:#181d26;
  --color-ink:#181d26;
  --color-body:#333840;
  --color-muted:#41454d;
  --color-hairline:#dddddd;
  --color-on-primary:#ffffff;
  --color-link:#1b61c9;
  --color-signature-coral:#aa2d00;
  --color-signature-forest:#0a2e0e;
  --color-signature-cream:#f5e9d4;
  --color-signature-peach:#fcab79;
  --color-signature-mint:#a8d8c4;
  --rounded-xs:2px;
  --rounded-sm:6px;
  --rounded-md:10px;
  --rounded-lg:12px;
  --sp-xs:8px;
  --sp-sm:12px;
  --sp-md:16px;
  --sp-lg:24px;
  --sp-xl:32px;
  --sp-xxl:48px;
  --sp-section:96px;
  --font-base:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter Display",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --max-w:1280px;
}

html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-base);font-size:14px;font-weight:400;line-height:1.6;color:var(--color-body);background:var(--color-canvas)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
address{font-style:normal}

.container{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-xxl)}

/* TOP NAV */
.top-nav{position:sticky;top:0;z-index:100;background:var(--color-canvas);border-bottom:1px solid var(--color-hairline);height:64px}
.nav-inner{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-xxl);height:100%;display:flex;align-items:center;gap:var(--sp-xl)}
.nav-logo{font-size:18px;font-weight:500;color:var(--color-ink);text-decoration:none;flex-shrink:0}
.nav-links{display:flex;gap:var(--sp-lg);margin-left:auto;align-items:center}
.nav-links a{font-size:14px;font-weight:400;color:var(--color-body);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--color-ink);font-weight:500}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;font-size:20px;color:var(--color-ink);margin-left:auto}

/* BUTTONS */
.btn-primary{display:inline-block;background:var(--color-primary);color:var(--color-on-primary);font-size:16px;font-weight:500;line-height:1.4;padding:14px 24px;border-radius:var(--rounded-lg);border:none;cursor:pointer;text-decoration:none}
.btn-primary:hover{background:var(--color-primary-active);text-decoration:none;color:var(--color-on-primary)}
.btn-secondary{display:inline-block;background:var(--color-canvas);color:var(--color-ink);font-size:16px;font-weight:500;line-height:1.4;padding:14px 24px;border-radius:var(--rounded-lg);border:1px solid var(--color-hairline);cursor:pointer;text-decoration:none}
.btn-secondary:hover{border-color:var(--color-ink);text-decoration:none;color:var(--color-ink)}
.btn-secondary-dark{display:inline-block;background:var(--color-canvas);color:var(--color-ink);font-size:16px;font-weight:500;line-height:1.4;padding:14px 24px;border-radius:var(--rounded-lg);border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-secondary-dark:hover{text-decoration:none;color:var(--color-ink)}
.btn-legal{background:var(--color-link);color:#fff;font-size:13.12px;font-weight:600;padding:10px 14px;border-radius:var(--rounded-xs);border:none;cursor:pointer}
.btn-legal-outline{background:transparent;color:var(--color-ink);border:1px solid var(--color-hairline)}

/* HERO BAND */
.hero-band{padding-block:var(--sp-section);background:var(--color-canvas)}
.hero-band .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xxl);align-items:center}
.hero-text h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--sp-md)}
.hero-text p{font-size:14px;font-weight:400;line-height:1.6;color:var(--color-body);margin-bottom:var(--sp-xl);max-width:500px}
.hero-actions{display:flex;gap:var(--sp-md);flex-wrap:wrap}
.hero-img{border-radius:var(--rounded-lg);overflow:hidden;aspect-ratio:4/3;object-fit:cover;width:100%}

/* SIGNATURE CARDS */
.sig-coral{background:var(--color-signature-coral);color:var(--color-on-primary);border-radius:var(--rounded-lg);padding:var(--sp-xxl)}
.sig-coral h2,.sig-coral p{color:var(--color-on-primary)}
.sig-forest{background:var(--color-signature-forest);color:var(--color-on-primary);border-radius:var(--rounded-lg);padding:var(--sp-xxl)}
.sig-forest h2,.sig-forest p{color:var(--color-on-primary)}
.sig-dark{background:var(--color-surface-dark);color:var(--color-on-primary);padding-block:var(--sp-section)}
.sig-dark .container{text-align:center}
.sig-dark h2{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-on-primary);margin-bottom:var(--sp-md)}
.sig-dark p{font-size:14px;color:#ffffffb3;margin-bottom:var(--sp-xl);max-width:560px;margin-inline:auto}
.sig-cream{background:var(--color-signature-cream);padding-block:var(--sp-section)}

/* SECTION BAND */
.section-band{padding-block:var(--sp-section)}
.section-band.bg-soft{background:var(--color-surface-soft)}
.section-band.bg-strong{background:var(--color-surface-strong)}

.section-title{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--sp-sm)}
.section-sub{font-size:14px;color:var(--color-body);margin-bottom:var(--sp-xxl);max-width:600px}

/* ARTICLE CARDS GRID */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.article-card{background:var(--color-canvas);border-radius:var(--rounded-md);border:1px solid var(--color-hairline);overflow:hidden;display:flex;flex-direction:column}
.article-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.article-card-body{padding:var(--sp-md);display:flex;flex-direction:column;gap:var(--sp-xs);flex:1}
.article-card-tag{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.article-card h3{font-size:18px;font-weight:500;line-height:1.4;color:var(--color-ink)}
.article-card p{font-size:14px;color:var(--color-body);flex:1}
.article-card-meta{font-size:13px;color:var(--color-muted);margin-top:auto}
.article-card a.card-link{display:block;font-size:14px;font-weight:500;color:var(--color-link);margin-top:var(--sp-xs)}

/* DEMO GRID CARDS */
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.demo-card{border-radius:var(--rounded-md);padding:var(--sp-md);display:flex;flex-direction:column;gap:var(--sp-sm)}
.demo-card.peach{background:var(--color-signature-peach)}
.demo-card.mint{background:var(--color-signature-mint)}
.demo-card.cream{background:var(--color-signature-cream)}
.demo-card img{border-radius:var(--rounded-sm);object-fit:cover;width:100%}
.demo-card h3{font-size:16px;font-weight:500;color:var(--color-ink)}
.demo-card p{font-size:14px;color:var(--color-body)}

/* SIGNATURE GRID (hero area) */
.sig-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-lg);margin-top:var(--sp-xl)}
.sig-grid-inner{display:flex;flex-direction:column;gap:var(--sp-lg)}

/* ARTICLE CONTENT */
.article-layout{padding-block:var(--sp-section)}
.article-layout .container{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-xxl);align-items:start}
.article-content h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--sp-md)}
.article-content .article-meta{font-size:13px;color:var(--color-muted);margin-bottom:var(--sp-xl);padding-bottom:var(--sp-md);border-bottom:1px solid var(--color-hairline)}
.article-content .lead{font-size:16px;line-height:1.6;color:var(--color-body);margin-bottom:var(--sp-xl)}
.article-content h2{font-size:24px;font-weight:400;line-height:1.35;color:var(--color-ink);margin-top:var(--sp-xl);margin-bottom:var(--sp-md)}
.article-content h3{font-size:18px;font-weight:500;line-height:1.4;color:var(--color-ink);margin-top:var(--sp-lg);margin-bottom:var(--sp-sm)}
.article-content p{font-size:14px;line-height:1.7;color:var(--color-body);margin-bottom:var(--sp-md)}
.article-content ul,.article-content ol{margin-bottom:var(--sp-md);padding-left:var(--sp-lg)}
.article-content ul li,.article-content ol li{font-size:14px;line-height:1.7;color:var(--color-body);margin-bottom:var(--sp-xs);list-style:disc}
.article-content ol li{list-style:decimal}
.article-content img{border-radius:var(--rounded-md);margin-block:var(--sp-xl);width:100%}
.article-content a{color:var(--color-link)}
.article-sidebar{position:sticky;top:80px}
.sidebar-card{background:var(--color-surface-soft);border-radius:var(--rounded-md);padding:var(--sp-lg);margin-bottom:var(--sp-lg)}
.sidebar-card h4{font-size:14px;font-weight:500;color:var(--color-ink);margin-bottom:var(--sp-sm);text-transform:uppercase;letter-spacing:.06em}
.sidebar-card ul{display:flex;flex-direction:column;gap:var(--sp-xs)}
.sidebar-card ul li a{font-size:14px;color:var(--color-link)}

/* CTA BAND LIGHT */
.cta-band-light{background:var(--color-surface-strong);padding-block:var(--sp-xxl);text-align:center;border-radius:var(--rounded-lg);margin-inline:var(--sp-xxl);margin-bottom:var(--sp-section)}
.cta-band-light h2{font-size:32px;font-weight:400;color:var(--color-ink);margin-bottom:var(--sp-md)}
.cta-band-light p{font-size:14px;color:var(--color-body);margin-bottom:var(--sp-xl);max-width:480px;margin-inline:auto}

/* CONTACT FORM */
.contact-form{display:flex;flex-direction:column;gap:var(--sp-md)}
.form-group{display:flex;flex-direction:column;gap:var(--sp-xs)}
.form-group label{font-size:14px;font-weight:500;color:var(--color-ink)}
.form-group input,.form-group textarea{background:var(--color-canvas);color:var(--color-ink);font-size:14px;font-family:var(--font-base);border-radius:var(--rounded-sm);border:1px solid var(--color-hairline);padding:10px var(--sp-md);height:44px;width:100%}
.form-group textarea{height:120px;resize:vertical}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#458fff;box-shadow:0 0 0 2px #458fff33}

/* FOOTER */
.site-footer{background:var(--color-canvas);border-top:1px solid var(--color-hairline);padding-block:var(--sp-section)}
.footer-inner{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-xxl)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-xxl);margin-bottom:var(--sp-xxl)}
.footer-brand{font-size:18px;font-weight:500;color:var(--color-ink);display:block;margin-bottom:var(--sp-sm)}
.footer-col p{font-size:14px;color:var(--color-muted);line-height:1.6;margin-bottom:var(--sp-md)}
.footer-col address{font-size:14px;color:var(--color-muted);line-height:1.8}
.footer-col address a{color:var(--color-muted)}
.footer-heading{font-size:14px;font-weight:500;color:var(--color-ink);display:block;margin-bottom:var(--sp-sm);text-transform:uppercase;letter-spacing:.06em}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-xs)}
.footer-col ul li a{font-size:14px;color:var(--color-muted)}
.footer-legal{border-top:1px solid var(--color-hairline);padding-top:var(--sp-lg)}
.footer-legal p{font-size:13px;color:var(--color-muted)}
.footer-disclaimer{margin-top:var(--sp-xs);font-size:12px;color:var(--color-muted)}

/* COOKIE BANNER */
.cookie-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--color-primary);color:#fff;padding:var(--sp-md) var(--sp-xxl)}
.cookie-banner.visible{display:block}
.cookie-inner{max-width:var(--max-w);margin-inline:auto;display:flex;align-items:center;gap:var(--sp-xl);flex-wrap:wrap}
.cookie-inner p{font-size:14px;color:#ffffffcc;flex:1}
.cookie-inner p a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:var(--sp-sm);flex-shrink:0}

/* PAGE HEADER */
.page-header{padding-block:var(--sp-xxl) var(--sp-xl);background:var(--color-canvas)}
.page-header h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--sp-sm)}
.page-header p{font-size:14px;color:var(--color-body);max-width:600px}

/* ABOUT / STATIC PAGES */
.prose h2{font-size:24px;font-weight:400;color:var(--color-ink);margin-top:var(--sp-xl);margin-bottom:var(--sp-md)}
.prose h3{font-size:18px;font-weight:500;color:var(--color-ink);margin-top:var(--sp-lg);margin-bottom:var(--sp-sm)}
.prose p{font-size:14px;line-height:1.7;color:var(--color-body);margin-bottom:var(--sp-md)}
.prose ul{padding-left:var(--sp-lg);margin-bottom:var(--sp-md)}
.prose ul li{font-size:14px;line-height:1.7;color:var(--color-body);list-style:disc;margin-bottom:var(--sp-xs)}
.prose a{color:var(--color-link)}

/* BREADCRUMB */
.breadcrumb{font-size:13px;color:var(--color-muted);margin-bottom:var(--sp-md)}
.breadcrumb a{color:var(--color-muted)}
.breadcrumb span{color:var(--color-muted)}

/* ARTICLES INDEX */
.articles-hero{padding-block:var(--sp-xxl);background:var(--color-surface-dark)}
.articles-hero h1{font-size:48px;font-weight:500;line-height:1.1;color:#fff;margin-bottom:var(--sp-sm)}
.articles-hero p{font-size:14px;color:#ffffffb3;max-width:520px}

/* RESPONSIVE */
@media(max-width:1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .demo-grid{grid-template-columns:repeat(2,1fr)}
  .sig-grid{grid-template-columns:1fr}
  .article-layout .container{grid-template-columns:1fr}
  .article-sidebar{position:static}
}
@media(max-width:768px){
  .container{padding-inline:var(--sp-md)}
  .nav-inner{padding-inline:var(--sp-md)}
  .nav-links{display:none;flex-direction:column;position:fixed;inset:64px 0 0 0;background:var(--color-canvas);padding:var(--sp-xl);gap:var(--sp-lg);overflow-y:auto;border-top:1px solid var(--color-hairline)}
  .nav-links.open{display:flex}
  .nav-hamburger{display:block}
  .hero-band .container{grid-template-columns:1fr}
  .hero-text h1{font-size:28px}
  .cards-grid{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .footer-inner{padding-inline:var(--sp-md)}
  .sig-coral,.sig-forest{padding:var(--sp-xl)}
  .articles-hero h1{font-size:32px}
  .article-content h1{font-size:28px}
  .section-title{font-size:24px}
  .cta-band-light{margin-inline:var(--sp-md)}
  .cookie-banner{padding:var(--sp-md)}
  .cookie-inner{flex-direction:column;gap:var(--sp-sm)}
}