:root{ --black:#030303; --black2:#070707; --ink:#ffffff; --muted:#b7b7b7; --gold:#d7b46a; --gold2:#f2d58a; --red:#d11124; --red2:#ff2538; --line:rgba(215,180,106,.28); --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.09); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background: radial-gradient(circle at 70% 8%,rgba(215,180,106,.18),transparent 26%), radial-gradient(circle at 12% 18%,rgba(209,17,36,.24),transparent 22%), linear-gradient(180deg,#000 0%,#050505 46%,#000 100%); line-height:1.55; } body:before{ content:""; position:fixed; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:52px 52px; mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%); } a{color:var(--gold2);text-decoration:none} a:hover{text-decoration:underline} .topbar{ position:sticky;top:0;z-index:50; background:rgba(0,0,0,.82); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); } .nav{ max-width:1240px;margin:auto; padding:15px 22px; display:flex;align-items:center;justify-content:space-between;gap:22px; } .brand{ color:#fff;font-weight:1000;font-size:28px;letter-spacing:-1px; } .brand span{color:var(--red2)} .navlinks{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;text-transform:uppercase;letter-spacing:.6px} main{max-width:1240px;margin:auto;padding:0 22px} .hero{ min-height:91vh; display:grid; grid-template-columns:1.03fr .97fr; gap:42px; align-items:center; padding:74px 0 60px; } .kicker{ display:inline-flex;align-items:center;gap:10px; padding:10px 14px;border-radius:999px; background:linear-gradient(90deg,rgba(209,17,36,.25),rgba(215,180,106,.11)); border:1px solid rgba(215,180,106,.38); color:#fff;font-weight:900;letter-spacing:.8px; text-transform:uppercase;font-size:12px; } .dot{width:10px;height:10px;border-radius:50%;background:var(--red2);box-shadow:0 0 0 8px rgba(209,17,36,.18),0 0 26px rgba(255,37,56,.8)} h1{ margin:24px 0 20px; font-size:clamp(54px,8.3vw,118px); line-height:.84; letter-spacing:-5px; text-transform:uppercase; } h1 .gold{color:var(--gold2)} h1 .red{color:var(--red2)} .lead{ font-size:clamp(20px,2.15vw,28px); color:#f0f0f0; max-width:820px; } .sublead{ color:var(--muted); font-size:18px; max-width:780px; } .ctas{display:flex;gap:15px;flex-wrap:wrap;margin:30px 0} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 23px; min-height:54px; border-radius:999px; font-weight:1000; text-transform:uppercase; letter-spacing:.55px; color:#fff; background:linear-gradient(180deg,#151515,#050505); border:1px solid rgba(215,180,106,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.55); } .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn.primary{ color:#080808; background:linear-gradient(135deg,#ffe8a8,#c49a43 48%,#fff0bf); border:0; box-shadow:0 0 0 1px rgba(255,232,168,.38),0 22px 72px rgba(215,180,106,.28); } .btn.danger{ background:linear-gradient(135deg,#ff263c,#a90012); border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 72px rgba(209,17,36,.32); } .panel{ position:relative; min-height:590px; border-radius:34px; border:1px solid var(--line); background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)), radial-gradient(circle at 50% 18%,rgba(215,180,106,.18),transparent 34%), #050505; box-shadow:0 46px 160px rgba(0,0,0,.7); overflow:hidden; padding:26px; } .panel:before{ content:"EU-112"; position:absolute; top:42px;right:-20px; font-size:148px; font-weight:1000; letter-spacing:-10px; color:rgba(255,255,255,.035); } .seal{ position:relative; width:310px;height:310px; margin:34px auto 26px; border-radius:50%; background:#fff; border:18px solid var(--red); color:#000; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; box-shadow:0 0 0 10px rgba(255,255,255,.05),0 0 85px rgba(209,17,36,.5); } .seal strong{font-size:72px;line-height:.9;letter-spacing:-4px} .seal span{font-size:18px;font-weight:1000;color:var(--red);text-transform:uppercase} .panel-card{ position:relative; background:rgba(0,0,0,.62); border:1px solid rgba(215,180,106,.32); border-radius:24px; padding:22px; } .panel-card h3{margin:0 0 10px;color:var(--gold2);font-size:25px} .panel-card p{color:#d4d4d4;margin:0} section{ padding:72px 0; border-top:1px solid rgba(215,180,106,.18); } h2{ margin:0 0 22px; font-size:clamp(34px,5vw,66px); line-height:.96; letter-spacing:-2.4px; text-transform:uppercase; } .section-lead{font-size:21px;color:#d8d8d8;max-width:900px} .notice{ border-radius:30px; padding:34px; background:linear-gradient(135deg,rgba(209,17,36,.22),rgba(215,180,106,.08)); border:1px solid rgba(215,180,106,.36); box-shadow:0 28px 90px rgba(0,0,0,.42); } .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:19px} .card{ position:relative; padding:26px; border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); border:1px solid rgba(215,180,106,.22); box-shadow:0 30px 85px rgba(0,0,0,.38); } .card h3{font-size:24px;margin:0 0 12px;color:var(--gold2)} .card p,.card li{color:var(--muted)} .num{ color:var(--red2); font-size:48px; font-weight:1000; line-height:1; margin-bottom:14px; } .emailbox{ margin:26px 0; padding:30px; border-radius:30px; border:2px dashed rgba(215,180,106,.7); background:linear-gradient(180deg,#070707,#000); font-size:clamp(28px,5vw,60px); font-weight:1000; text-align:center; color:#fff; box-shadow:0 0 80px rgba(215,180,106,.12); } .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .step{ padding:22px; border-radius:24px; border:1px solid rgba(215,180,106,.25); background:rgba(255,255,255,.045); } .step small{color:var(--red2);font-weight:1000;text-transform:uppercase;letter-spacing:1px} .flags{display:flex;flex-wrap:wrap;gap:9px} .flag{padding:8px 11px;border-radius:999px;border:1px solid rgba(215,180,106,.25);background:rgba(255,255,255,.045);color:#e8e8e8;font-size:13px} .quote{ font-size:clamp(30px,4.5vw,58px); line-height:1.05; font-weight:1000; letter-spacing:-2px; } .table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:22px} .table th,.table td{padding:16px;border:1px solid rgba(215,180,106,.22);text-align:left;vertical-align:top} .table th{background:rgba(215,180,106,.12);color:#fff}.table td{color:var(--muted)} .author{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:start} .avatar{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),#9b6e18);display:flex;align-items:center;justify-content:center;color:#060606;font-size:54px;font-weight:1000} .quick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0} .pill{border:1px solid rgba(215,180,106,.25);border-radius:999px;padding:8px 12px;color:#f0f0f0;background:rgba(255,255,255,.045);font-size:13px} .footer{padding:44px 22px;text-align:center;border-top:1px solid rgba(215,180,106,.2);background:#000;color:var(--muted)} .small{font-size:13px;color:#999} @media(max-width:920px){ .hero,.grid,.grid2,.timeline,.author{grid-template-columns:1fr} .nav{align-items:flex-start;flex-direction:column} h1{letter-spacing:-2px} .seal{width:250px;height:250px}.seal strong{font-size:58px} }