/*
============================================================

Discover Connecticut Intelligence Platform

File:
discover-intelligence.css

Version:
1.0.0

Author:
Mark Pires

Purpose:
Master Design System

============================================================
*/

/*==========================================================
ROOT
==========================================================*/

:root{

--primary:#0A84FF;
--primary-dark:#0063d1;

--secondary:#00C2FF;

--success:#34C759;
--warning:#FF9F0A;
--danger:#FF453A;

--background:#05070B;
--surface:#10151D;
--surface-light:#18202B;

--border:#26303D;

--text:#FFFFFF;
--text-light:#D5D9E0;
--text-muted:#9DA8B7;

--radius-sm:8px;
--radius:14px;
--radius-lg:24px;

--shadow:

0 10px 35px rgba(0,0,0,.35);

--transition:

all .28s ease;

--max-width:1450px;

}

/*==========================================================
RESET
==========================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--background);

color:var(--text);

font-family:

'Inter',
sans-serif;

font-size:16px;

line-height:1.7;

overflow-x:hidden;

}

/*==========================================================
TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5{

font-weight:800;

letter-spacing:-.03em;

margin-bottom:18px;

}

h1{

font-size:clamp(42px,6vw,72px);

line-height:1.05;

}

h2{

font-size:clamp(32px,4vw,54px);

}

h3{

font-size:30px;

}

h4{

font-size:22px;

}

p{

color:var(--text-light);

margin-bottom:22px;

}

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

/*==========================================================
LAYOUT
==========================================================*/

.dc-container{

width:min(94%,var(--max-width));

margin:auto;

}

.dc-main{

min-height:70vh;

padding:80px 0;

}

/*==========================================================
HEADER
==========================================================*/

.dc-header{

position:sticky;

top:0;

z-index:9999;

backdrop-filter:blur(18px);

background:

rgba(5,7,11,.85);

border-bottom:

1px solid rgba(255,255,255,.05);

}

.dc-header .dc-container{

display:flex;

align-items:center;

justify-content:space-between;

height:82px;

gap:40px;

}

.dc-logo{

display:flex;

flex-direction:column;

}

.dc-logo-title{

font-size:22px;

font-weight:800;

}

.dc-logo-subtitle{

font-size:12px;

letter-spacing:.15em;

text-transform:uppercase;

color:var(--secondary);

}

/*==========================================================
NAVIGATION
==========================================================*/

.dc-navigation ul{

display:flex;

list-style:none;

gap:34px;

}

.dc-navigation a{

color:var(--text-light);

font-weight:600;

}

.dc-navigation a:hover{

color:var(--primary);

}

/*==========================================================
BUTTONS
==========================================================*/

.dc-header-button,

.dc-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:

14px 24px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

border-radius:999px;

font-weight:700;

color:#fff;

box-shadow:var(--shadow);

transition:var(--transition);

}

.dc-button:hover,

.dc-header-button:hover{

transform:

translateY(-2px);

}

/*==========================================================
SECTION
==========================================================*/

.dc-section{

padding:110px 0;

}

.dc-section-title{

margin-bottom:15px;

}

.dc-section-subtitle{

max-width:760px;

color:var(--text-muted);

font-size:19px;

}

/*==========================================================
GRID
==========================================================*/

.dc-grid{

display:grid;

gap:28px;

}

.dc-grid-2{

grid-template-columns:

repeat(2,1fr);

}

.dc-grid-3{

grid-template-columns:

repeat(3,1fr);

}

.dc-grid-4{

grid-template-columns:

repeat(4,1fr);

}

/*==========================================================
CARD SYSTEM
==========================================================*/

.dc-card{

background:

linear-gradient(

180deg,

rgba(255,255,255,.03),

rgba(255,255,255,.015)

);

border:

1px solid rgba(255,255,255,.05);

border-radius:var(--radius-lg);

padding:32px;

transition:var(--transition);

overflow:hidden;

position:relative;

}

.dc-card:hover{

transform:

translateY(-6px);

border-color:

rgba(10,132,255,.35);

box-shadow:

0 25px 60px rgba(0,0,0,.45);

}

.dc-card h3{

margin-bottom:12px;

}

.dc-card p{

margin-bottom:0;

}

/*==========================================================
STAT CARDS
==========================================================*/

.dc-stat{

font-size:46px;

font-weight:800;

line-height:1;

margin-bottom:8px;

}

.dc-label{

font-size:14px;

text-transform:uppercase;

letter-spacing:.15em;

color:var(--text-muted);

}

/*==========================================================
BADGES
==========================================================*/

.dc-badge{

display:inline-flex;

align-items:center;

padding:

6px 14px;

border-radius:999px;

background:

rgba(10,132,255,.12);

border:

1px solid rgba(10,132,255,.25);

color:var(--secondary);

font-size:13px;

font-weight:700;

}

/*==========================================================
FOOTER
==========================================================*/

.dc-footer{

margin-top:120px;

padding:

80px 0;

border-top:

1px solid rgba(255,255,255,.06);

background:#07090E;

}

.dc-footer-grid{

display:grid;

grid-template-columns:

2fr
1fr
1fr
1fr;

gap:60px;

}

.dc-footer-column h4{

margin-bottom:20px;

}

.dc-footer-column ul{

list-style:none;

}

.dc-footer-column li{

margin-bottom:12px;

}

.dc-footer-bottom{

margin-top:60px;

padding-top:30px;

border-top:

1px solid rgba(255,255,255,.05);

display:flex;

justify-content:space-between;

color:var(--text-muted);

font-size:14px;

}

/*==========================================================
DEBUG
==========================================================*/

.dc-debug{

margin-top:30px;

padding:20px;

background:#111;

border-left:

4px solid orange;

font-size:14px;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:1200px){

.dc-grid-4{

grid-template-columns:

repeat(2,1fr);

}

}

@media (max-width:960px){

.dc-navigation{

display:none;

}

.dc-footer-grid{

grid-template-columns:1fr;

}

.dc-grid-3,

.dc-grid-2{

grid-template-columns:1fr;

}

}

@media (max-width:640px){

h1{

font-size:42px;

}

.dc-card{

padding:24px;

}

.dc-main{

padding:50px 0;

}

}