@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap');

/* 
   Premium Design System - NRK 2026 Redesign
   Aesthetic: Vibrant, Modern, Glassmorphism, Premium Typography
*/

:root {
    --c1: 232, 112, 44;     /* NRK Primary Orange */
    --c1-dark: 212, 92, 24;
    --bg-dark: 18, 20, 24;
    --surface: 255, 255, 255;
    --text: 24, 28, 34;
    --bcalpha: 1;
    --calpha: 1;
    --glass: rgba(255, 255, 255, 0.7);
    --shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: rgba(var(--text), var(--calpha));
    background-color: #fcfcfc;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal { animation: fadeInUp 0.6s ease-out forwards; }

/* Typography */
.h1, .h2, .h3, .h4, .h5, .h6 { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800; 
    line-height: 1.2; 
    letter-spacing: -0.02em;
}

.h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); }
.h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.h3 { font-size: 1.5rem; }
.h6 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }

.c1 { color: rgb(var(--c1)); }
.c1_h:hover { color: rgb(var(--c1)) !important; }
.err_h:hover { color: #f43f5e !important; }

/* Components */
.bc1 { 
    background: linear-gradient(135deg, rgb(var(--c1)), rgb(var(--c1-dark)));
    color: white !important;
    box-shadow: 0 4px 15px rgba(var(--c1), 0.3);
}
.bc1:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--c1), 0.4); }

.glass {
    background: var(--glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow);
}

.card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(var(--c1), 0.1); }

/* Layout */
.flex { display: flex; }
.flex-v { flex-direction: column; }
.flex-w { flex-wrap: wrap; }
.flex-sb { justify-content: space-between; }
.flex-ac { align-items: center; }
.flex-jc { justify-content: center; }
.flex-fg-i { flex: 1; }
.mla { margin-left: auto; }

.grid { display: grid; gap: 2.5rem; }
.gtc22 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.ph5vw { padding-left: 5vw; padding-right: 5vw; }
.pv5vw { padding-top: 5vw; padding-bottom: 5vw; }
.pt2 { padding-top: 2rem; }
.pt6 { padding-top: 6rem; }
.pb2 { padding-bottom: 2rem; }
.pb6 { padding-bottom: 6rem; }

/* Spacing & Sizes */
.mb05 { margin-bottom: 0.5rem; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.mb3 { margin-bottom: 3rem; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt6 { margin-top: 6rem; }
.p0 { padding: 0; }
.p1 { padding: 1rem; }
.p2 { padding: 2rem; }
.gg1 { gap: 1rem; }
.gg15 { gap: 1.5rem; }
.gg2 { gap: 2rem; }

/* Buttons & Navigation */
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}

.btn:active { transform: scale(0.96); }

/* Navigation Refinement */
nav ul li a {
    position: relative;
    padding: 0.5rem 1rem;
}
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgb(var(--c1));
    transition: 0.3s;
    transform: translateX(-50%);
}
nav ul li a:hover::after { width: 80%; }

/* Form Elements */
input[type="text"], input[type="password"], input[type="email"], input[type="date"], textarea, select {
    width: 100%;
    padding: 1.2rem;
    border-radius: 1rem;
    border: 2px solid #f1f5f9;
    background: #f8fafc;
    font-family: inherit;
    transition: all 0.2s;
    font-size: 1rem;
}
input:focus, textarea:focus { border-color: rgb(var(--c1)); background: white; outline: none; box-shadow: 0 0 0 4px rgba(var(--c1), 0.1); }

fieldset { border: 1px solid #f1f5f9; padding: 2rem; border-radius: 1.5rem; }
legend { padding: 0 1rem; font-weight: 700; color: rgb(var(--c1)); }

/* Utility */
.wid100p { width: 100%; }
.ovHidden { overflow: hidden; }
.opacity-70 { opacity: 0.7; }
.tac { text-align: center; }
.shadow { box-shadow: var(--shadow); }
.green { color: #10b981; }

/* Dashboard Timeline */
.blw0125 { border-left-width: 2px; }
.bssolid { border-left-style: solid; }
.bcc1 { border-left-color: rgba(var(--c1), 0.2); }

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .maxwid60 { max-width: 100% !important; }
    .maxwid34 { max-width: 100% !important; }
}

@media (max-width: 768px) {
    .ph5vw { padding-left: 1.5rem; padding-right: 1.5rem; }
    .pt6 { padding-top: 3rem; }
    .pb6 { padding-bottom: 3rem; }
    .h1 { font-size: 2.5rem; }
    .card { padding: 1.5rem; }
    header { flex-direction: column; gap: 1rem; text-align: center; }
    nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
}