:root { --wti-blue: #0066a6; --wti-blue-dark: #004b7a; --wti-blue-light: #eaf5fb;

--accent: #18a0ae; --success: #16875d;

--text: #17212b; --text-secondary: #5c6873; --text-muted: #7c8791;

--background: #f4f7f9; --surface: #ffffff; --border: #e1e7ec;

--shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.06); --shadow-md: 0 10px 30px rgba(20, 40, 60, 0.10); --shadow-lg: 0 18px 45px rgba(0, 70, 110, 0.14);

--radius: 14px; --max-width: 1050px; }

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

Reset / Base 

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

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

html { scroll-behavior: smooth; }

body { margin: 0;

background: radial-gradient( circle at 90% 0%, rgba(0, 102, 166, 0.08), transparent 32rem ), var(--background);

color: var(--text);

font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

line-height: 1.6;

-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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

    Header 

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

header { position: relative;

min-height: 205px;

padding: 42px 24px;

overflow: hidden;

background: linear-gradient( 135deg, #003f68 0%, var(--wti-blue) 55%, #078ba3 100% );

color: #ffffff;

box-shadow: 0 4px 20px rgba(0, 55, 90, 0.18); }

header::before { content: "";

position: absolute;

width: 500px; height: 500px;

right: -180px; top: -300px;

background: rgba(255, 255, 255, 0.08);

border-radius: 50%; }

header::after { content: "";

position: absolute;

width: 250px; height: 250px;

right: 8%; bottom: -190px;

background: rgba(255, 255, 255, 0.05);

border-radius: 50%; }

.header-inner { position: relative; z-index: 2;

display: flex; align-items: center;

gap: 28px;

width: 100%; max-width: var(--max-width);

margin: 0 auto; }

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

    Logo 

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

.logo { display: flex; align-items: center; justify-content: center;

flex: 0 0 auto;

width: 88px; height: 88px;

padding: 12px;

background: #ffffff;

border-radius: 18px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }

.logo img { display: block;

max-width: 100%; max-height: 100%;

object-fit: contain; }

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

    Header Typography 

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

header h1 { margin: 0;

font-size: clamp(2rem, 5vw, 3rem);

font-weight: 700;

line-height: 1.1;

letter-spacing: -0.04em; }

.header-subtitle { margin: 10px 0 0;

color: rgba(255, 255, 255, 0.75);

font-size: 0.98rem;

font-weight: 400; }

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

    Main 

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

main { width: min( calc(100% - 32px), var(--max-width) );

margin: 44px auto 70px; }

.intro { margin-bottom: 36px; }

.intro-label { display: inline-flex; align-items: center;

padding: 5px 11px;

background: var(--wti-blue-light);

color: var(--wti-blue);

border-radius: 999px;

font-size: 0.72rem; font-weight: 800;

letter-spacing: 0.08em; text-transform: uppercase; }

.intro h2 { margin: 12px 0 5px;

font-size: 1.75rem;

letter-spacing: -0.025em; }

.intro p { margin: 0;

max-width: 700px;

color: var(--text-secondary);

font-size: 0.98rem; }

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

    Release Timeline 

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

.release-list { position: relative; }

.release-list::before { content: "";

position: absolute;

left: 20px; top: 30px; bottom: 30px;

width: 2px;

background: linear-gradient( to bottom, rgba(0, 102, 166, 0.25), rgba(0, 102, 166, 0.04) ); }

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

    Release Card 

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

.version-card { position: relative;

margin: 0 0 26px 54px;

padding: 28px 32px 30px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius);

box-shadow: var(--shadow-sm);

transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }

.version-card:last-child { margin-bottom: 0; }

.version-card:hover { transform: translateY(-3px);

border-color: rgba(0, 102, 166, 0.28);

box-shadow: var(--shadow-md); }

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

    Timeline Dot 

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

.version-card::before { content: "";

position: absolute;

left: -45px; top: 32px;

width: 18px; height: 18px;

background: #ffffff;

border: 4px solid var(--wti-blue);

border-radius: 50%;

box-shadow: 0 0 0 5px var(--background); }

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

    Version Header 

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

.version-header { display: flex;

align-items: flex-start; justify-content: space-between;

gap: 20px;

margin-bottom: 20px; }

.version { display: flex;

align-items: center;

gap: 10px;

margin: 0;

color: var(--wti-blue-dark);

font-size: 1.35rem;

font-weight: 600;

line-height: 1.3; }

.version strong { display: inline-flex;

align-items: center;

padding: 5px 12px;

background: var(--wti-blue-light);

color: var(--wti-blue);

border-radius: 999px;

font-size: 0.88rem;

font-weight: 750; }

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

    Release Metadata 
    
========================================================= */

.release-meta { display: flex;

flex-wrap: wrap;

gap: 8px;

margin-top: 10px; }

.meta { display: inline-flex;

align-items: center;

padding: 5px 10px;

background: #f5f7f9;

color: var(--text-secondary);

border: 1px solid #e8edf0;

border-radius: 7px;

font-size: 0.75rem;

font-weight: 500; }

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

Feature Count 

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

.feature-count { display: inline-flex;

align-items: center;

gap: 6px;

margin-bottom: 16px;

color: var(--text-muted);

font-size: 0.78rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.06em; }

.feature-count::before { content: "";

width: 6px; height: 6px;

background: var(--success);

border-radius: 50%; }

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

Release Details 

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

.details { margin: 0; padding: 0;

list-style: none; }

.details li { position: relative;

margin: 0;

padding: 10px 0 10px 29px;

color: var(--text-secondary);

font-size: 0.94rem;

line-height: 1.55; }

.details li::before { content: "";

position: absolute;

top: 18px; left: 6px;

width: 7px; height: 7px;

background: var(--accent);

border-radius: 50%; }

.details li + li { border-top: 1px solid #edf0f2; }

.details strong { color: var(--text);

font-weight: 650; }

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

    Latest Release 

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

.version-card.latest { background: linear-gradient( 180deg, rgba(234, 245, 251, 0.75), #ffffff 210px );

border: 1px solid rgba(0, 102, 166, 0.28);

box-shadow: var(--shadow-lg); }

.version-card.latest::after { content: "LATEST RELEASE";

position: absolute;

top: -13px; right: 28px;

padding: 5px 13px;

background: var(--success);

color: #ffffff;

border-radius: 999px;

font-size: 0.65rem;

font-weight: 800;

letter-spacing: 0.08em;

box-shadow: 0 5px 15px rgba(22, 135, 93, 0.25); }

.version-card.latest::before { border-color: var(--success); }

.version-card.latest .version { font-size: 1.5rem; }

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

    Footer 
    
========================================================= */

footer { padding: 32px 24px;

background: #102a3b;

color: rgba(255, 255, 255, 0.62);

text-align: center;

font-size: 0.8rem;

line-height: 1.8; }

footer a { color: #72c8e8;

text-decoration: none;

transition: color 160ms ease; }

footer a:hover { color: #ffffff;

text-decoration: underline; }

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

    Responsive - Tablets / Mobile

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

@media (max-width: 700px) {

header { min-height: 175px;

padding: 30px 20px;

text-align: center; }

.header-inner { flex-direction: column;

justify-content: center;

gap: 16px; }

.logo { width: 68px; height: 68px;

padding: 9px;

border-radius: 14px; }

header h1 { font-size: 2rem; }

.header-subtitle { margin-top: 7px;

font-size: 0.85rem; }

main { width: calc(100% - 24px);

margin-top: 32px; margin-bottom: 50px; }

.intro { margin-bottom: 28px; }

.intro h2 { font-size: 1.45rem; }

.intro p { font-size: 0.9rem; }

.release-list::before { left: 13px; }

.version-card { margin-left: 36px;

padding: 23px 20px 25px;

border-radius: 12px; }

.version-card::before { left: -31px;

width: 14px; height: 14px;

border-width: 3px; }

.version-header { display: block; }

.version { flex-wrap: wrap;

font-size: 1.15rem; }

.version-card.latest .version { font-size: 1.3rem; }

.version-card.latest::after { top: -11px; right: 17px;

font-size: 0.58rem; }

.details li { padding-left: 24px;

font-size: 0.88rem; }

footer { padding: 26px 18px;

font-size: 0.74rem; } }

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

    Responsive - Very Small Screens

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

@media (max-width: 420px) {

.version-card { margin-left: 30px;

padding: 20px 17px 22px; }

.release-list::before { left: 10px; }

.version-card::before { left: -27px;

width: 12px; height: 12px; }

.version strong { font-size: 0.8rem; }

.details li { font-size: 0.84rem; } }

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

    Accessibility 

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

@media (prefers-reduced-motion: reduce) {

html { scroll-behavior: auto; }

.version-card { transition: none; } }

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

    Print 

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

@media print {

body { background: #ffffff; }

header { min-height: auto;

padding: 25px;

background: #ffffff;

color: #000000;

box-shadow: none; }

header h1 { color: #000000; }

.header-subtitle { color: #555555; }

main { width: 100%;

margin: 25px 0; }

.version-card { margin-left: 0;

break-inside: avoid;

box-shadow: none; }

.release-list::before, .version-card::before, .version-card.latest::after { display: none; }

footer { background: #ffffff;

color: #555555; } }