/* ===========================
DHG Modern Design System
=========================== */
/* Optional: self-host Inter or use system font. */
/* If you want Inter from Google Fonts, add in :
*/
:root{
/* Color tokens */
--bg: #070A12;
--bg2: #0B1020;
--surface: rgba(255,255,255,0.06);
--surface-2: rgba(255,255,255,0.09);
--border: rgba(255,255,255,0.12);
--text: rgba(255,255,255,0.92);
--muted: rgba(255,255,255,0.66);
--muted-2: rgba(255,255,255,0.50);
--brand: #4DA3FF;
--brand2: #8B5CF6;
--good: #22C55E;
--warn: #F59E0B;
/* Layout tokens */
--container: 1160px;
--radius: 18px;
--radius-sm: 12px;
/* Shadows */
--shadow: 0 18px 60px rgba(0,0,0,0.55);
--shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
/* Type scale (fluid) */
--font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
--h1: clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem);
--h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
--h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
--p: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
/* Spacing scale */
--s1: .5rem;
--s2: .75rem;
--s3: 1rem;
--s4: 1.25rem;
--s5: 1.6rem;
--s6: 2rem;
--s7: 2.6rem;
--s8: 3.4rem;
--s9: 4.5rem;
/* Motion */
--ease: cubic-bezier(.2,.8,.2,1);
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: var(--font);
color: var(--text);
background: radial-gradient(1200px 600px at 30% -10%, rgba(77,163,255,0.18), transparent 55%),
radial-gradient(900px 500px at 90% 20%, rgba(139,92,246,0.16), transparent 55%),
linear-gradient(180deg, var(--bg), var(--bg2));
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.95; }
img{ max-width:100%; display:block; }
::selection{ background: rgba(77,163,255,0.30); }
.container{
width: min(var(--container), calc(100% - 2.2rem));
margin: 0 auto;
}
/* Subtle background grid + noise overlay (CSS trick) */
.bg-grid{
position: relative;
}
.bg-grid::before{
content:"";
position:absolute; inset:0;
background:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(closest-side at 50% 30%, rgba(0,0,0,0.55), transparent 70%);
pointer-events:none;
opacity: 0.35;
}
.bg-grid::after{
/* lightweight "noise" effect using repeating gradients */
content:"";
position:absolute; inset:0;
background: repeating-linear-gradient(
0deg,
rgba(255,255,255,0.03),
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: overlay;
opacity: 0.10;
pointer-events:none;
}
/* Typography */
h1,h2,h3{ letter-spacing: -0.02em; margin:0 0 var(--s3); }
h1{ font-size: var(--h1); line-height: 1.05; }
h2{ font-size: var(--h2); line-height: 1.15; }
h3{ font-size: var(--h3); line-height: 1.25; }
p{ font-size: var(--p); line-height: 1.6; margin:0 0 var(--s4); color: var(--muted); }
.kicker{
display:inline-flex;
align-items:center;
gap:.55rem;
padding: .45rem .75rem;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
border-radius: 999px;
font-size: .92rem;
color: var(--muted);
backdrop-filter: blur(10px);
}
/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding: .85rem 1.05rem;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.06);
color: var(--text);
font-weight: 600;
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
.btn:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
border-color: rgba(255,255,255,0.22);
}
.btn:active{ transform: translateY(0px) scale(0.99); }
.btn-primary{
border-color: rgba(77,163,255,0.40);
background: linear-gradient(135deg, rgba(77,163,255,0.95), rgba(139,92,246,0.90));
box-shadow: 0 18px 50px rgba(77,163,255,0.20);
}
.btn-primary:hover{
box-shadow: 0 20px 70px rgba(139,92,246,0.22);
}
.btn-ghost{
background: transparent;
}
/* Accessible focus */
:focus-visible{
outline: 0;
box-shadow: 0 0 0 3px rgba(77,163,255,0.35);
border-radius: 12px;
}
/* Cards (glassmorphism) */
.card{
border-radius: var(--radius);
border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
backdrop-filter: blur(14px);
box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.card-inner{ padding: var(--s6); }
/* Gradient border "trick" */
.card-glow{
position: relative;
overflow: hidden;
}
.card-glow::before{
content:"";
position:absolute; inset:-2px;
background: linear-gradient(135deg, rgba(77,163,255,0.55), rgba(139,92,246,0.50), transparent 70%);
filter: blur(18px);
opacity: 0.55;
pointer-events:none;
}
.card-glow::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
border: 1px solid rgba(255,255,255,0.10);
pointer-events:none;
}
/* Sections */
.section{
padding: clamp(3.2rem, 4vw, 6rem) 0;
}
.section-title{
max-width: 66ch;
}
.section-title p{ margin-bottom: 0; }
/* Layout utilities */
.grid{
display:grid;
gap: var(--s5);
}
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){
.grid-2,.grid-3{ grid-template-columns: 1fr; }
}
/* Hero */
.hero{
position: relative;
padding: clamp(3.2rem, 6vw, 7rem) 0 clamp(2rem, 4vw, 4rem);
}
.hero-wrap{
display:grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--s7);
align-items: center;
}
@media (max-width: 980px){
.hero-wrap{ grid-template-columns: 1fr; }
}
.hero h1{
margin-top: var(--s3);
}
.hero p{
font-size: clamp(1.05rem, 1rem + .35vw, 1.18rem);
max-width: 62ch;
}
.hero-cta{
display:flex;
gap: var(--s3);
flex-wrap: wrap;
margin-top: var(--s5);
}
.hero-meta{
display:flex;
gap: var(--s4);
flex-wrap: wrap;
margin-top: var(--s5);
color: var(--muted-2);
font-size: .95rem;
}
.meta-pill{
display:inline-flex;
align-items:center;
gap:.55rem;
padding:.55rem .75rem;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
border-radius: 999px;
}
/* Hero right-side "product preview" */
.preview{
position: relative;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.04);
overflow: hidden;
box-shadow: var(--shadow);
}
.preview::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(650px 420px at 20% 10%, rgba(77,163,255,0.25), transparent 60%),
radial-gradient(600px 380px at 80% 30%, rgba(139,92,246,0.22), transparent 65%);
pointer-events:none;
}
.preview-inner{
padding: var(--s6);
position: relative;
}
.preview .mockbar{
height: 14px;
width: 120px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
margin-bottom: var(--s4);
}
.preview .mockline{
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
margin: .65rem 0;
}
.preview .mockline.w60{ width: 60%; }
.preview .mockline.w80{ width: 80%; }
.preview .mockline.w40{ width: 40%; }
/* Feature cards */
.feature{
padding: var(--s6);
transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.feature:hover{
transform: translateY(-3px);
border-color: rgba(255,255,255,0.22);
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}
.icon{
width: 44px; height: 44px;
display:grid; place-items:center;
border-radius: 14px;
background: rgba(77,163,255,0.14);
border: 1px solid rgba(77,163,255,0.25);
margin-bottom: var(--s4);
}
/* Pricing */
.pricing{
align-items: stretch;
}
.price-card{
padding: var(--s7) var(--s6);
}
.price{
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.03em;
margin: var(--s4) 0 var(--s3);
}
.badge{
display:inline-flex;
align-items:center;
padding: .4rem .65rem;
border-radius: 999px;
border: 1px solid rgba(34,197,94,0.35);
background: rgba(34,197,94,0.12);
color: rgba(255,255,255,0.86);
font-weight: 650;
font-size: .9rem;
}
.list{
margin: var(--s5) 0 0;
padding: 0;
list-style: none;
color: var(--muted);
}
.list li{
display:flex;
gap:.65rem;
margin: .7rem 0;
}
.list li::before{
content:"✓";
color: rgba(34,197,94,0.95);
font-weight: 900;
}
/* Footer */
.footer{
border-top: 1px solid rgba(255,255,255,0.10);
padding: var(--s7) 0;
color: var(--muted);
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
*{ transition: none !important; scroll-behavior: auto !important; }
}
/* ===========================
Reusable Components (Add-on)
=========================== */
/* Sticky / glass header */
.site-header{
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(14px);
background: rgba(7,10,18,0.55);
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-header .nav{
display:flex;
align-items:center;
justify-content:space-between;
gap: 1rem;
padding: .9rem 0;
}
.brand{
display:flex;
align-items:center;
gap: .7rem;
font-weight: 850;
letter-spacing: -0.02em;
}
.brand-badge{
width: 34px;
height: 34px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(77,163,255,0.95), rgba(139,92,246,0.90));
box-shadow: 0 14px 35px rgba(77,163,255,0.25);
}
.nav-links{
display:flex;
align-items:center;
gap: .8rem;
flex-wrap: wrap;
}
.nav-links a{
color: rgba(255,255,255,0.82);
font-weight: 600;
padding: .55rem .7rem;
border-radius: 12px;
transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-links a:hover{
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.95);
}
.nav-cta{
display:flex;
gap: .7rem;
align-items:center;
}
/* Mobile nav using (no JS) */
.nav-mobile{
display:none;
position: relative;
}
.nav-mobile details{
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
background: rgba(255,255,255,0.04);
}
.nav-mobile summary{
list-style:none;
cursor:pointer;
padding: .7rem .9rem;
display:flex;
gap:.6rem;
align-items:center;
user-select:none;
}
.nav-mobile summary::-webkit-details-marker{ display:none; }
.nav-mobile .panel{
padding: .6rem;
border-top: 1px solid rgba(255,255,255,0.10);
display:grid;
gap:.25rem;
}
.nav-mobile .panel a{
padding:.7rem .8rem;
border-radius: 12px;
}
.nav-mobile .panel a:hover{
background: rgba(255,255,255,0.06);
}
@media (max-width: 900px){
.nav-links, .nav-cta{ display:none; }
.nav-mobile{ display:block; }
}
/* Section separator */
.section-sep{
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
margin: 0;
border: 0;
}
/* Use-case cards */
.usecases{
align-items: stretch;
}
.usecase-card{
padding: var(--s7) var(--s6);
position: relative;
}
.usecase-card .tag{
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.35rem .6rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
font-size: .9rem;
color: var(--muted);
margin-bottom: var(--s4);
}
.usecase-card h3{ margin: 0 0 .65rem; }
.usecase-card p{ margin-bottom: var(--s4); }
.usecase-card .mini{
margin-top: var(--s4);
color: var(--muted-2);
font-size: .95rem;
}
.usecase-card .actions{
display:flex;
gap: .75rem;
flex-wrap: wrap;
margin-top: var(--s5);
}
/* How it works (steps) */
.steps{
counter-reset: step;
align-items: stretch;
}
.step{
padding: var(--s7) var(--s6);
}
.step .num{
width: 44px;
height: 44px;
border-radius: 14px;
display:grid;
place-items:center;
font-weight: 900;
color: rgba(255,255,255,0.9);
border: 1px solid rgba(77,163,255,0.35);
background: rgba(77,163,255,0.14);
margin-bottom: var(--s4);
}
.step .num::before{
counter-increment: step;
content: counter(step);
}
/* Social proof / logo strip */
.logos{
display:flex;
gap: 1.2rem;
flex-wrap: wrap;
align-items:center;
opacity: .78;
}
.logo-pill{
padding: .7rem .9rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
font-weight: 650;
letter-spacing: -0.01em;
}
/* Testimonials */
.testimonials{
align-items: stretch;
}
.quote{
padding: var(--s7) var(--s6);
position: relative;
}
.quote blockquote{
margin: 0 0 var(--s5);
color: rgba(255,255,255,0.86);
font-size: 1.05rem;
line-height: 1.6;
}
.quote .who{
display:flex;
align-items:center;
gap: .9rem;
}
.avatar{
width: 44px; height: 44px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(77,163,255,0.35), rgba(139,92,246,0.30));
border: 1px solid rgba(255,255,255,0.12);
}
.who .name{ font-weight: 750; }
.who .role{ color: var(--muted); font-size: .95rem; }
/* FAQ (semantic + SEO-friendly) */
.faq{
display:grid;
gap: .85rem;
max-width: 900px;
}
.faq details{
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
overflow: hidden;
}
.faq summary{
cursor:pointer;
padding: 1.05rem 1.2rem;
display:flex;
justify-content:space-between;
align-items:center;
gap: 1rem;
user-select:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq .q{
font-weight: 750;
color: rgba(255,255,255,0.9);
}
.faq .chev{
width: 34px; height: 34px;
border-radius: 12px;
display:grid; place-items:center;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.03);
transition: transform .18s var(--ease);
}
.faq details[open] .chev{ transform: rotate(180deg); }
.faq .a{
padding: 0 1.2rem 1.1rem;
color: var(--muted);
}
/* Pricing toggle (needs a tiny JS helper below) */
.pricing-toggle{
display:flex;
justify-content:center;
margin: var(--s5) 0 var(--s6);
}
.toggle{
display:flex;
align-items:center;
gap: .85rem;
padding: .55rem .65rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
}
.switch{
width: 52px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
position: relative;
cursor: pointer;
}
.knob{
widt