@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Inter+Display:wght@400;475;500&display=swap');

*,*::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-link-active:#1a3866;
    --color-signature-coral:#aa2d00;
    --color-signature-forest:#0a2e0e;
    --color-signature-cream:#f5e9d4;
    --color-signature-peach:#fcab79;
    --color-signature-mint:#a8d8c4;
    --color-signature-yellow:#f4d35e;
    --color-signature-mustard:#d9a441;
    --rounded-xs:2px;
    --rounded-sm:6px;
    --rounded-md:10px;
    --rounded-lg:12px;
    --rounded-full:9999px;
    --spacing-xxs:4px;
    --spacing-xs:8px;
    --spacing-sm:12px;
    --spacing-md:16px;
    --spacing-lg:24px;
    --spacing-xl:32px;
    --spacing-xxl:48px;
    --spacing-section:96px;
}

html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter','Inter Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:var(--color-body);background:var(--color-canvas)}

a{color:var(--color-link);text-decoration:none}
a:active{color:var(--color-link-active)}

img{max-width:100%;height:auto;display:block}

address{font-style:normal}

.container{max-width:1280px;margin:0 auto;padding:0 var(--spacing-xxl)}

.site-header{height:64px;background:var(--color-canvas);border-bottom:1px solid var(--color-hairline);position:sticky;top:0;z-index:100;display:flex;align-items:center}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font-size:18px;font-weight:500;color:var(--color-ink);letter-spacing:-0.2px}
.logo:active{color:var(--color-primary-active)}

.site-nav ul{display:flex;gap:var(--spacing-lg);list-style:none;align-items:center}
.site-nav a{font-size:14px;font-weight:400;color:var(--color-body)}
.site-nav a:active{color:var(--color-ink)}
.has-sub{position:relative}
.sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:var(--spacing-xs) 0;min-width:260px;box-shadow:0 4px 16px rgba(24,29,38,.08)}
.has-sub:hover .sub-menu{display:block}
.sub-menu li a{display:block;padding:var(--spacing-xs) var(--spacing-md);font-size:13px;color:var(--color-body);white-space:nowrap}
.sub-menu li a:active{background:var(--color-surface-soft)}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--spacing-xs)}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--color-ink);border-radius:2px;transition:transform .2s,opacity .2s}

.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:16px 24px;border-radius:var(--rounded-lg);border:none;cursor:pointer;text-decoration:none}
.btn-primary:active{background:var(--color-primary-active);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:16px 24px;border-radius:var(--rounded-lg);border:1px solid var(--color-hairline);cursor:pointer;text-decoration:none}
.btn-secondary:active{background:var(--color-surface-soft);color:var(--color-ink)}

.btn-legal{display:inline-block;background:var(--color-link);color:var(--color-on-primary);font-size:13.12px;font-weight:600;line-height:1.2;padding:12px 10px;border-radius:var(--rounded-xs);border:none;cursor:pointer}

.hero-band{padding:var(--spacing-section) 0;background:var(--color-canvas)}
.hero-band h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);max-width:680px;margin-bottom:var(--spacing-lg)}
.hero-band p{font-size:18px;font-weight:400;line-height:1.5;color:var(--color-body);max-width:560px;margin-bottom:var(--spacing-xl)}
.hero-band .btn-row{display:flex;gap:var(--spacing-md);flex-wrap:wrap;align-items:center}

.section-band{padding:var(--spacing-section) 0}
.section-band--soft{background:var(--color-surface-soft)}
.section-band--strong{background:var(--color-surface-strong)}

.section-heading{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--spacing-lg)}
.section-sub{font-size:14px;font-weight:400;line-height:1.6;color:var(--color-body);max-width:620px;margin-bottom:var(--spacing-xxl)}

.signature-coral{background:var(--color-signature-coral);padding:var(--spacing-xxl);border-radius:var(--rounded-lg);color:var(--color-on-primary)}
.signature-coral h2{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-on-primary);margin-bottom:var(--spacing-md)}
.signature-coral p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:var(--spacing-xl);max-width:540px}

.signature-forest{background:var(--color-signature-forest);padding:var(--spacing-xxl);border-radius:var(--rounded-lg);color:var(--color-on-primary)}
.signature-forest h2{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-on-primary);margin-bottom:var(--spacing-md)}
.signature-forest p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:var(--spacing-xl);max-width:540px}

.signature-dark{background:var(--color-surface-dark);padding:var(--spacing-xxl);border-radius:var(--rounded-lg);color:var(--color-on-primary)}
.signature-dark h2{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-on-primary);margin-bottom:var(--spacing-md)}
.signature-dark p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.75);margin-bottom:var(--spacing-xl);max-width:540px}

.signature-cream{background:var(--color-signature-cream);padding:var(--spacing-xxl);border-radius:var(--rounded-md)}
.signature-cream h2{font-size:32px;font-weight:400;line-height:1.2;color:var(--color-ink);margin-bottom:var(--spacing-md)}
.signature-cream p{font-size:14px;line-height:1.6;color:var(--color-body);margin-bottom:var(--spacing-xl);max-width:540px}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.card-grid--4{grid-template-columns:repeat(4,1fr)}

.article-card{background:var(--color-canvas);border-radius:var(--rounded-md);border:1px solid var(--color-hairline);overflow:hidden}
.article-card-img{aspect-ratio:16/9;overflow:hidden}
.article-card-img img{width:100%;height:100%;object-fit:cover}
.article-card-body{padding:var(--spacing-md)}
.article-card-tag{font-size:12px;font-weight:500;color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--spacing-xs)}
.article-card-title{font-size:18px;font-weight:500;line-height:1.4;color:var(--color-ink);margin-bottom:var(--spacing-xs)}
.article-card-title a{color:inherit}
.article-card-title a:active{color:var(--color-link)}
.article-card-meta{font-size:13px;color:var(--color-muted)}
.article-card-excerpt{font-size:14px;line-height:1.6;color:var(--color-body);margin-top:var(--spacing-xs)}

.demo-card{border-radius:var(--rounded-md);padding:var(--spacing-md);overflow:hidden}
.demo-card--peach{background:var(--color-signature-peach)}
.demo-card--mint{background:var(--color-signature-mint)}
.demo-card--yellow{background:var(--color-signature-yellow)}
.demo-card--mustard{background:var(--color-signature-mustard)}
.demo-card--cream{background:var(--color-signature-cream)}
.demo-card h3{font-size:16px;font-weight:500;color:var(--color-ink);margin-bottom:var(--spacing-xs)}
.demo-card p{font-size:13px;color:var(--color-body);line-height:1.5}
.demo-card img{width:100%;border-radius:var(--rounded-sm);margin-bottom:var(--spacing-sm);object-fit:cover;aspect-ratio:4/3}

.text-input{width:100%;background:var(--color-canvas);color:var(--color-ink);font-size:14px;padding:12px 16px;height:44px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm)}
.text-input:focus{outline:none;border-color:#458fff;box-shadow:0 0 0 2px rgba(69,143,255,.2)}
textarea.text-input{height:auto;min-height:100px;resize:vertical}

.contact-form{max-width:560px}
.form-group{margin-bottom:var(--spacing-md)}
.form-label{display:block;font-size:14px;font-weight:500;color:var(--color-ink);margin-bottom:var(--spacing-xs)}

.cta-band{background:var(--color-surface-strong);border-radius:var(--rounded-lg);padding:var(--spacing-xxl);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl);flex-wrap:wrap}
.cta-band h2{font-size:32px;font-weight:400;color:var(--color-ink);max-width:420px}

.article-hero{padding:var(--spacing-xxl) 0;border-bottom:1px solid var(--color-hairline)}
.article-hero h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);max-width:780px;margin-bottom:var(--spacing-md)}
.article-hero .meta{font-size:13px;color:var(--color-muted);margin-bottom:var(--spacing-lg)}
.article-hero .lead{font-size:18px;line-height:1.6;color:var(--color-body);max-width:680px}

.article-body{padding:var(--spacing-section) 0}
.article-content{max-width:720px}
.article-content h2{font-size:28px;font-weight:400;line-height:1.25;color:var(--color-ink);margin:var(--spacing-xxl) 0 var(--spacing-md)}
.article-content h3{font-size:20px;font-weight:500;line-height:1.35;color:var(--color-ink);margin:var(--spacing-xl) 0 var(--spacing-sm)}
.article-content p{font-size:15px;line-height:1.7;color:var(--color-body);margin-bottom:var(--spacing-md)}
.article-content ul,.article-content ol{margin:0 0 var(--spacing-md) var(--spacing-xl);font-size:15px;line-height:1.7;color:var(--color-body)}
.article-content li{margin-bottom:var(--spacing-xs)}
.article-content a{color:var(--color-link)}
.article-content a:active{color:var(--color-link-active)}
.article-content figure{margin:var(--spacing-xxl) 0}
.article-content figure img{width:100%;border-radius:var(--rounded-md)}
.article-content figcaption{font-size:13px;color:var(--color-muted);margin-top:var(--spacing-xs);line-height:1.4}

.article-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-xxl);align-items:start}
.article-sidebar{position:sticky;top:80px}
.sidebar-card{background:var(--color-surface-soft);border-radius:var(--rounded-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}
.sidebar-card h4{font-size:14px;font-weight:500;color:var(--color-ink);margin-bottom:var(--spacing-sm)}
.sidebar-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-xs)}
.sidebar-card ul a{font-size:13px;color:var(--color-link)}
.sidebar-card ul a:active{color:var(--color-link-active)}

.breadcrumb{font-size:13px;color:var(--color-muted);margin-bottom:var(--spacing-md)}
.breadcrumb a{color:var(--color-muted)}
.breadcrumb a:active{color:var(--color-ink)}
.breadcrumb span{margin:0 var(--spacing-xxs)}

.page-hero{padding:var(--spacing-xxl) 0;border-bottom:1px solid var(--color-hairline)}
.page-hero h1{font-size:40px;font-weight:400;line-height:1.2;color:var(--color-ink);max-width:680px;margin-bottom:var(--spacing-md)}
.page-hero p{font-size:16px;line-height:1.6;color:var(--color-body);max-width:560px}

.prose h2{font-size:24px;font-weight:400;line-height:1.35;color:var(--color-ink);margin:var(--spacing-xxl) 0 var(--spacing-sm)}
.prose h3{font-size:18px;font-weight:500;line-height:1.4;color:var(--color-ink);margin:var(--spacing-xl) 0 var(--spacing-xs)}
.prose p{font-size:15px;line-height:1.7;color:var(--color-body);margin-bottom:var(--spacing-md)}
.prose ul,.prose ol{margin:0 0 var(--spacing-md) var(--spacing-xl);font-size:15px;line-height:1.7;color:var(--color-body)}
.prose li{margin-bottom:var(--spacing-xs)}
.prose a{color:var(--color-link)}
.prose a:active{color:var(--color-link-active)}

.site-footer{background:var(--color-canvas);border-top:1px solid var(--color-hairline);padding:var(--spacing-section) 0 0}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-xxl)}
.footer-brand{font-size:18px;font-weight:500;color:var(--color-ink);margin-bottom:var(--spacing-sm)}
.footer-desc{font-size:14px;line-height:1.6;color:var(--color-muted);max-width:280px}
.footer-heading{font-size:14px;font-weight:500;color:var(--color-ink);margin-bottom:var(--spacing-sm)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-xs)}
.footer-col ul a{font-size:14px;color:var(--color-muted)}
.footer-col ul a:active{color:var(--color-ink)}
.footer-col address p{font-size:14px;color:var(--color-muted);line-height:1.6;margin-bottom:var(--spacing-xs)}
.footer-col address a{color:var(--color-muted)}
.footer-col address a:active{color:var(--color-ink)}
.footer-bottom{border-top:1px solid var(--color-hairline);padding:var(--spacing-lg) 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;font-size:13px;color:var(--color-muted)}
.footer-legal-links{display:flex;gap:var(--spacing-lg)}
.footer-legal-links a{color:var(--color-muted);font-size:13px}
.footer-legal-links a:active{color:var(--color-ink)}

.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface-dark);color:var(--color-on-primary);padding:var(--spacing-md) var(--spacing-xxl);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl);flex-wrap:wrap;z-index:200}
.cookie-banner p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);max-width:720px}
.cookie-banner p a{color:rgba(255,255,255,.9)}
.cookie-banner-btns{display:flex;gap:var(--spacing-sm);flex-shrink:0}
.cookie-banner.hidden{display:none}

.harbor-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);margin:var(--spacing-xxl) 0}
.stat-item{text-align:center;padding:var(--spacing-lg);background:var(--color-surface-soft);border-radius:var(--rounded-md)}
.stat-number{font-size:36px;font-weight:500;color:var(--color-ink);line-height:1;margin-bottom:var(--spacing-xs)}
.stat-label{font-size:13px;color:var(--color-muted)}

.disclaimer{background:var(--color-surface-soft);border-left:3px solid var(--color-hairline);padding:var(--spacing-md) var(--spacing-lg);border-radius:0 var(--rounded-sm) var(--rounded-sm) 0;font-size:13px;color:var(--color-muted);line-height:1.5;margin:var(--spacing-xl) 0}

.tag{display:inline-block;font-size:12px;font-weight:500;color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--color-surface-soft);padding:3px 8px;border-radius:var(--rounded-xs)}

@media (max-width:1024px){
    .card-grid--4{grid-template-columns:repeat(2,1fr)}
    .harbor-stats{grid-template-columns:repeat(2,1fr)}
    .article-layout{grid-template-columns:1fr}
    .article-sidebar{position:static}
    .footer-inner{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
    .container{padding:0 var(--spacing-md)}
    .nav-toggle{display:flex}
    .site-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--color-canvas);padding:var(--spacing-xl);overflow-y:auto;z-index:99}
    .site-nav.open{display:block}
    .site-nav ul{flex-direction:column;gap:0}
    .site-nav > ul > li{border-bottom:1px solid var(--color-hairline)}
    .site-nav > ul > li > a{display:block;padding:var(--spacing-md) 0;font-size:16px;color:var(--color-ink)}
    .sub-menu{display:block;position:static;border:none;box-shadow:none;padding:0 0 var(--spacing-sm) var(--spacing-md)}
    .sub-menu li a{padding:var(--spacing-xs) 0;font-size:14px}
    .hero-band h1{font-size:28px}
    .hero-band p{font-size:16px}
    .section-heading{font-size:24px}
    .signature-coral,.signature-forest,.signature-dark,.signature-cream{padding:var(--spacing-xl)}
    .signature-coral h2,.signature-forest h2,.signature-dark h2,.signature-cream h2{font-size:24px}
    .card-grid{grid-template-columns:1fr}
    .card-grid--2{grid-template-columns:1fr}
    .harbor-stats{grid-template-columns:repeat(2,1fr)}
    .cta-band{flex-direction:column;text-align:center}
    .cta-band h2{font-size:24px}
    .article-hero h1{font-size:28px}
    .article-hero .lead{font-size:16px}
    .footer-inner{grid-template-columns:1fr}
    .footer-bottom .container{flex-direction:column;text-align:center}
    .cookie-banner{flex-direction:column;padding:var(--spacing-md)}
    .page-hero h1{font-size:28px}
}