@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --bg: #090c12;
    --panel: #10141d;
    --panel-light: #151a25;
    --text: #f3f5f9;
    --muted: #858d9b;
    --line: rgba(255, 255, 255, .09);
    --violet: #8d5cff;
    --violet-light: #b39aff;
    --lime: #b9f54a;
    --display: "Space Grotesk", sans-serif;
    --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--violet) #0b0e15; scrollbar-width: thin; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: var(--body); }
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-track { background: #0b0e15; }
body::-webkit-scrollbar-thumb { border: 2px solid #0b0e15; border-radius: 20px; background: linear-gradient(var(--violet), #6334d4); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }

.page-loader {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    color: #b2b8c4;
    background: #090c12;
    transition: opacity .45s, visibility .45s;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader > span { font: 600 11px var(--display); letter-spacing: 2.5px; text-transform: uppercase; }
.loader-mark, .brand-mark { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 3px; width: 21px; transform: rotate(45deg); }
.loader-mark { grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 14px); gap: 5px; width: 33px; animation: loader-breathe 1.1s ease-in-out infinite; }
.loader-mark i, .brand-mark i { display: block; border-radius: 2px; background: var(--violet); }
.loader-mark i:nth-child(2), .brand-mark i:nth-child(2) { background: var(--lime); opacity: .85; }
.loader-mark i:nth-child(3), .brand-mark i:nth-child(3) { grid-column: 1 / span 2; width: 9px; justify-self: center; background: var(--violet-light); }
.loader-mark i:nth-child(3) { width: 14px; }
@keyframes loader-breathe { 0%,100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(.84); opacity: .58; } }

.site-header {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 48px));
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    transform: translateX(-50%);
    animation: header-in .75s .1s both cubic-bezier(.2,.75,.25,1);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand > span:last-child { display: flex; flex-direction: column; font: 700 15px/1 var(--display); letter-spacing: -.3px; }
.brand small { margin-top: 5px; color: #5f6673; font: 700 7px/1 var(--body); letter-spacing: 1px; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 34px; color: #777f8d; font-size: 10px; font-weight: 700; }
.site-header nav a { position: relative; color: #e8ebf1; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; border-radius: 2px; background: var(--lime); }
.site-header nav span { display: flex; align-items: center; gap: 7px; }
.site-header nav b { padding: 3px 6px; border: 1px solid rgba(141, 92, 255, .3); border-radius: 5px; color: var(--violet-light); font-size: 6px; letter-spacing: .7px; text-transform: uppercase; }
.header-link { display: flex; align-items: center; gap: 8px; color: #aab0bc; font-size: 9px; font-weight: 700; }
.header-link i { color: var(--lime); font-style: normal; transition: transform .2s; }
.header-link:hover i { transform: translate(2px,-2px); }
@keyframes header-in { from { opacity:0; transform:translate(-50%,-16px); } }

.hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 150px max(24px, calc((100% - 1180px) / 2)) 100px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(circle at 76% 42%, rgba(141, 92, 255, .1), transparent 28%), #090c12;
}
.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(to right, transparent 6%, #000 55%, transparent 95%);
    animation: grid-drift 20s linear infinite;
}
.hero-glow {
    position: absolute;
    top: 24%;
    right: 10%;
    width: 380px;
    aspect-ratio: 1;
    border: 1px solid rgba(141, 92, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 50px rgba(141,92,255,.025), 0 0 0 100px rgba(141,92,255,.018), inset 0 0 100px rgba(141,92,255,.08);
    transform: translate(var(--move-x,0),var(--move-y,0));
    transition: transform .55s cubic-bezier(.2,.75,.25,1);
}
.hero-glow::before, .hero-glow::after { content: ""; position: absolute; border-radius: 50%; }
.hero-glow::before { inset: 26%; border: 1px solid rgba(185,245,74,.2); box-shadow: 0 0 45px rgba(185,245,74,.08); }
.hero-glow::after { top: 50%; left: 50%; width: 16px; height: 16px; background: var(--lime); box-shadow: 0 0 40px rgba(185,245,74,.7); transform: translate(-50%,-50%); }
.hero-orbits { position:absolute; top:calc(24% + 190px); right:calc(10% + 190px); width:1px; height:1px; pointer-events:none; }
.hero-orbits i { position:absolute; top:-6px; left:-6px; width:12px; height:12px; border:2px solid #090c12; border-radius:50%; background:var(--violet-light); box-shadow:0 0 22px rgba(141,92,255,.65); transform-origin:6px 6px; animation:orbit-one 9s linear infinite; }
.hero-orbits i:nth-child(2) { width:8px; height:8px; top:-4px; left:-4px; background:var(--lime); box-shadow:0 0 18px rgba(185,245,74,.55); animation:orbit-two 13s linear infinite reverse; }
.hero-orbits i:nth-child(3) { width:6px; height:6px; top:-3px; left:-3px; opacity:.7; animation:orbit-three 17s linear infinite; }
.hero-copy { position: relative; z-index: 2; width: min(700px, 70%); }
.hero-copy > * { opacity:0; animation:hero-copy-in .75s both cubic-bezier(.2,.75,.25,1); }
.hero-copy > :nth-child(1) { animation-delay:.2s; }
.hero-copy > :nth-child(2) { animation-delay:.3s; }
.hero-copy > :nth-child(3) { animation-delay:.42s; }
.hero-copy > :nth-child(4) { animation-delay:.54s; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; color: #818997; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow i { width: 20px; height: 1px; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.hero h1 { margin: 0; font: 600 clamp(48px, 7.1vw, 92px)/.98 var(--display); letter-spacing: -5px; }
.hero h1 em { color: var(--violet-light); font-style: normal; }
.hero-copy > p { width: min(560px, 100%); margin: 30px 0 34px; color: #8f96a3; font-size: 14px; line-height: 1.8; }
.button { position:relative; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 0 22px; overflow:hidden; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .4px; transition: transform .2s, border-color .2s, background .2s, opacity .2s,box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #0d100b; background: var(--lime); box-shadow: 0 9px 30px rgba(185,245,74,.12); }
.button-primary::before { content:""; position:absolute; top:-100%; bottom:-100%; left:-55%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent); transform:rotate(18deg); transition:left .5s ease; }
.button-primary:hover { box-shadow:0 13px 36px rgba(185,245,74,.2); }
.button-primary:hover::before { left:120%; }
.button-primary span:last-child { font-size: 15px; }
@keyframes grid-drift { to { background-position:74px 74px; } }
@keyframes hero-copy-in { from { opacity:0; transform:translateY(22px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes orbit-one { from { transform:rotate(0) translateX(190px) rotate(0); } to { transform:rotate(360deg) translateX(190px) rotate(-360deg); } }
@keyframes orbit-two { from { transform:rotate(30deg) translateX(112px) rotate(-30deg); } to { transform:rotate(390deg) translateX(112px) rotate(-390deg); } }
@keyframes orbit-three { from { transform:rotate(110deg) translateX(155px) rotate(-110deg); } to { transform:rotate(470deg) translateX(155px) rotate(-470deg); } }

.converter-section { width: min(1050px, calc(100% - 48px)); margin: 0 auto; padding: 105px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.section-heading > div > span { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.section-heading h2 { margin: 8px 0 0; font: 600 clamp(30px, 4vw, 46px)/1.1 var(--display); letter-spacing: -1.8px; }
.section-heading > p { max-width: 350px; margin: 0; color: #707887; font-size: 11px; text-align: right; }
.js-ready [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1); }
.js-ready [data-reveal].is-visible { opacity:1; transform:none; }
.converter-card { position:relative; padding: 26px; overflow:hidden; border: 1px solid rgba(141,92,255,.18); border-radius: 22px; background: linear-gradient(145deg, rgba(141,92,255,.035), transparent 38%), var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.converter-card::before { content:""; position:absolute; z-index:0; top:-160px; left:-180px; width:360px; height:300px; border-radius:50%; background:rgba(141,92,255,.07); filter:blur(70px); animation:card-ambient 8s ease-in-out infinite alternate; pointer-events:none; }
.converter-card > * { position:relative; z-index:1; }
.drop-zone { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 35px; overflow: hidden; border: 1px dashed rgba(141,92,255,.36); border-radius: 16px; text-align: center; background: rgba(8,11,17,.52); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--lime); background: rgba(185,245,74,.025); }
.drop-zone.is-dragging { transform: scale(.993); }
.drop-zone::after { content:""; position:absolute; top:0; bottom:0; left:-35%; width:25%; opacity:0; background:linear-gradient(90deg,transparent,rgba(141,92,255,.06),transparent); transform:skewX(-18deg); pointer-events:none; }
.drop-zone:hover::after { opacity:1; animation:drop-scan 1.15s ease; }
.drop-zone > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-symbol { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 22px; }
.upload-symbol i { position: absolute; inset: 0; border: 1px solid rgba(141,92,255,.26); border-radius: 16px; background: rgba(141,92,255,.07); transform: rotate(8deg); }
.upload-symbol b { position: relative; color: var(--violet-light); font: 500 25px var(--display); }
.drop-zone > strong { font: 600 19px var(--display); }
.drop-zone > p { margin: 8px 0; color: #79818e; font-size: 11px; }
.drop-zone > small { color: #525a67; font-size: 8px; letter-spacing: .4px; }
.selected-file { position: absolute; inset: 0; display: grid; grid-template-columns:54px minmax(0,1fr) 36px; align-items: center; gap: 16px; padding: 25px max(25px, calc(50% - 260px)); text-align: left; background: #0d1119; }
.selected-file[hidden] { display: none; }
.selected-file > span { width: 54px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(185,245,74,.17); border-radius: 12px; color: var(--lime); background: rgba(185,245,74,.05); font: 700 9px var(--display); }
.selected-file > div { display: flex; min-width: 0; flex-direction: column; }
.selected-file strong { overflow: hidden; font: 600 14px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.selected-file small { margin-top: 6px; color: #676f7c; font-size: 9px; }
.selected-file button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: #8c94a1; background: #151923; cursor: pointer; font-size: 18px; }
.selected-file.file-enter { animation:file-enter .42s cubic-bezier(.2,.8,.25,1); }
.format-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 25px 0 0; padding: 0; border: 0; }
.format-picker legend { margin-bottom: 12px; color: #777f8d; font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.format-picker label { cursor: pointer; }
.format-picker input { position: absolute; opacity: 0; pointer-events: none; }
.format-picker label > span { min-height: 86px; display: grid; grid-template-columns:minmax(0,1fr) 25px; align-content: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.015); transition: border-color .2s, background .2s, transform .2s; }
.format-picker label:hover > span { transform: translateY(-2px); border-color: rgba(141,92,255,.35); }
.format-picker b, .format-picker small { display: block; grid-column: 1; }
.format-picker b { font: 600 15px var(--display); }
.format-picker small { margin-top: 5px; color: #646c79; font-size: 8px; }
.format-picker i { grid-column: 2; grid-row: 1/3; width: 22px; height: 22px; display: grid; place-items: center; align-self: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-style: normal; font-size: 9px; }
.format-picker input:checked + span { border-color: rgba(185,245,74,.35); background: rgba(185,245,74,.035); }
.format-picker input:checked + span i { border-color: var(--lime); color: #0c1007; background: var(--lime); animation:check-in .28s ease; }
.converter-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 25px; padding-top: 24px; border-top: 1px solid var(--line); }
.converter-footer p { margin: 0; color: #626a77; font-size: 8px; }
.converter-footer p span { margin-right: 6px; color: var(--lime); }
.convert-button { min-width: 210px; }
.convert-button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.convert-button.is-loading i { animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@keyframes card-ambient { to { transform:translate(130px,70px) scale(1.15); } }
@keyframes drop-scan { to { left:115%; } }
@keyframes file-enter { from { opacity:0; transform:scale(.97); } }
@keyframes check-in { from { transform:scale(.55); } }
.alert { display: flex; align-items: center; gap: 13px; margin: -12px 0 20px; padding: 14px 17px; border: 1px solid rgba(255,97,119,.24); border-radius: 11px; color: #ff9cac; background: rgba(255,74,105,.055); }
.alert > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(255,97,119,.12); font-weight: 800; }
.alert p { margin: 0; font-size: 10px; }

footer { width: min(1180px, calc(100% - 48px)); min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 10px auto 0; border-top: 1px solid var(--line); color: #59616d; font-size: 8px; }
footer > p { margin: 0; }

@media (max-width: 850px) {
    .site-header nav { display: none; }
    .hero { min-height: 680px; }
    .hero-copy { width: 100%; }
    .hero h1 { letter-spacing: -3px; }
    .hero-glow { right: -180px; opacity: .55; }
    .hero-orbits { right:10px; opacity:.55; }
}

@media (max-width: 600px) {
    .site-header { width: calc(100% - 30px); height: 74px; }
    .header-link { font-size: 0; }
    .header-link i { font-size: 14px; }
    .hero { min-height: 650px; padding: 125px 18px 85px; align-items: flex-start; }
    .hero h1 { font-size: 47px; letter-spacing: -2.8px; }
    .hero-copy > p { font-size: 12px; }
    .hero-orbits { display:none; }
    .converter-section { width: calc(100% - 30px); padding: 75px 0; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .section-heading > p { text-align: left; }
    .converter-card { padding: 13px; border-radius: 17px; }
    .drop-zone { min-height: 270px; padding: 25px 16px; }
    .selected-file { padding: 20px; }
    .format-picker { grid-template-columns: 1fr; }
    .converter-footer { align-items: stretch; flex-direction: column; }
    .convert-button { width: 100%; }
    footer { width: calc(100% - 30px); align-items: flex-start; flex-direction: column; padding: 35px 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}