:root{

--bg:#f4f7fb;
--surface:#ffffff;

--primary:#0f172a;
--secondary:#334155;
--muted:#64748b;

--accent:#2563eb;
--accent-light:#dbeafe;

--success:#15803d;
--warning:#ea580c;
--danger:#b91c1c;

--border:#e2e8f0;

--shadow:
0 4px 10px rgba(15,23,42,.05),
0 12px 28px rgba(15,23,42,.08);

}

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

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

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);

font-family:
"Segoe UI",
system-ui,
sans-serif;

line-height:1.75;

color:var(--secondary);

}

/* ===========================
HERO
=========================== */

.hero{

padding:60px 20px;

text-align:center;

background:white;

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

}

.badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:var(--accent-light);

color:var(--accent);

font-size:12px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.hero h1{

font-size:42px;

color:var(--primary);

max-width:1000px;

margin:auto;

line-height:1.25;

}

.subtitle{

margin-top:18px;

font-size:18px;

color:var(--muted);

max-width:850px;

margin-left:auto;
margin-right:auto;

}

.meta{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

margin-top:35px;

}

.meta div{

background:white;

padding:18px;

min-width:180px;

border-radius:12px;

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

box-shadow:var(--shadow);

}

/* ===========================
SECTIONS
=========================== */

section{

max-width:1150px;

margin:22px auto;

padding:30px;

background:white;

border-radius:14px;

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

box-shadow:var(--shadow);

}

section:hover{

transform:translateY(-2px);

transition:.25s ease;

}

h2{

font-size:24px;

color:var(--primary);

margin-bottom:18px;

padding-bottom:10px;

border-bottom:2px solid var(--border);

}

h3{

margin-bottom:10px;

color:var(--primary);

}

p{

text-align:justify;

}

ul,
ol{

padding-left:22px;

}

li{

margin-bottom:10px;

}

/* ===========================
TIMELINE
=========================== */

.timeline{

position:relative;

padding-left:30px;

margin-top:15px;

}

.timeline::before{

content:"";

position:absolute;

left:8px;

top:0;

width:3px;

height:100%;

background:var(--accent);

}

.event{

position:relative;

padding-left:18px;

margin-bottom:25px;

}

.event::before{

content:"";

position:absolute;

left:-29px;

top:6px;

width:16px;

height:16px;

background:var(--accent);

border-radius:50%;

border:3px solid white;

box-shadow:0 0 0 2px var(--accent);

}

/* ===========================
TABLES
=========================== */

table{

width:100%;

border-collapse:collapse;

margin-top:15px;

overflow:hidden;

border-radius:10px;

}

table th{

background:var(--accent);

color:white;

font-weight:600;

}

table th,
table td{

padding:14px;

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

text-align:left;

}

table tr:nth-child(even){

background:#f8fafc;

}

/* ===========================
IOC HIGHLIGHT
=========================== */

.ioc-box{

padding:18px;

border-left:5px solid var(--danger);

background:#fef2f2;

border-radius:10px;

margin-top:15px;

}

.detect-box{

padding:18px;

border-left:5px solid var(--success);

background:#ecfdf5;

border-radius:10px;

margin-top:15px;

}

.info-box{

padding:18px;

border-left:5px solid var(--accent);

background:#eff6ff;

border-radius:10px;

margin-top:15px;

}

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

footer{

margin-top:40px;

padding:35px 20px;

background:white;

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

text-align:center;

}

footer p:first-child{

font-size:18px;

font-weight:700;

color:var(--primary);

}

footer p:last-child{

margin-top:8px;

color:var(--muted);

}

/* ===========================
LINKS
=========================== */

a{

color:var(--accent);

font-weight:600;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#94a3b8;

border-radius:20px;

}

/* ===========================
MOBILE
=========================== */

@media(max-width:768px){

.hero{

padding:40px 15px;

}

.hero h1{

font-size:28px;

}

.subtitle{

font-size:15px;

}

.meta{

flex-direction:column;

align-items:center;

}

.meta div{

width:100%;
max-width:350px;

}

section{

margin:12px;

padding:18px;

}

h2{

font-size:20px;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

.timeline{

padding-left:25px;

}

}

/* ===========================
LARGE SCREENS
=========================== */

@media(min-width:1400px){

.hero h1{

font-size:52px;

}

section{

max-width:1250px;

}

}

/* ===========================
PRINT PDF
=========================== */

@media print{

body{

background:white;

}

section{

box-shadow:none;

border:1px solid #ddd;

}

.hero{

border-bottom:1px solid #ddd;

}

  }