@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,600;1,300;1,500&family=Outfit:wght@300;400;500;600&display=swap');

:root {
    --ink:         #080C18;
    --ice:         #A8D8EA;
    --ice-bright:  #38BDF8;
    --silver:      #CBD5E1;
    --snow:        #F8F9FF;
    --card:        #FFFFFF;
    --muted:       #7A869A;
    --border:      rgba(203,213,225,0.65);
    --sidebar-w:   38%;
    --radius-card: 28px;
    --radius-btn:  14px;
    --ease:        cubic-bezier(0.4,0,0.2,1);
    --t:           0.22s;
    --toggle-bg:   rgba(8,12,24,0.06);
    --toggle-c:    var(--muted);
}

[data-theme="dark"] {
    --ink:       #E8F1FF;
    --silver:    #4A5568;
    --snow:      #0B1120;
    --card:      #111827;
    --muted:     #8896A8;
    --border:    rgba(255,255,255,0.08);
    --toggle-bg: rgba(255,255,255,0.08);
    --toggle-c:  rgba(168,216,234,0.7);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    background: var(--snow);
    font-family: 'Outfit',-apple-system,sans-serif;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

:root:not([data-theme="dark"]) body {
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(168,216,234,0.18) 0%,transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(56,189,248,0.10)  0%,transparent 60%);
}

.mobile-profile { display:none; }
.layout-wrapper { width:100%; max-width:920px; padding:24px; }

.split-card {
    display: flex;
    background: var(--card);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(8,12,24,0.04),0 8px 24px rgba(8,12,24,0.08),0 40px 80px rgba(8,12,24,0.10);
    min-height: 620px;
    transition: background var(--t) var(--ease);
}

.sidebar {
    flex: 0 0 var(--sidebar-w);
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.sidebar::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(to bottom,rgba(8,12,24,0.05) 0%,rgba(8,12,24,0.15) 40%,rgba(8,12,24,0.82) 75%,rgba(8,12,24,0.97) 100%);
    z-index:1;
}
.sidebar::after {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(135deg,rgba(168,216,234,0.06) 0%,transparent 50%,rgba(56,189,248,0.04) 100%);
    z-index:2; pointer-events:none;
}
.sidebar-content { position:relative; z-index:3; padding:36px 30px 40px; color:white; }

.sidebar-tag {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--ice); background:rgba(168,216,234,0.12); border:1px solid rgba(168,216,234,0.25);
    padding:5px 12px; border-radius:100px; margin-bottom:14px;
}

.sidebar h1 { font-family:'Cormorant Garamond',Georgia,serif; font-size:2.6rem; font-weight:500; line-height:1.05; color:white; margin-bottom:4px; }
.sidebar h1 em { font-style:italic; font-weight:300; color:rgba(255,255,255,0.72); }

.tagline { font-size:0.78rem; font-weight:300; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.58); margin-bottom:32px; }

.side-nav { display:flex; flex-direction:column; gap:4px; }
.side-nav a {
    display:flex; align-items:center; gap:11px;
    color:rgba(255,255,255,0.58); text-decoration:none;
    font-size:0.82rem; font-weight:500;
    padding:9px 14px; border-radius:10px; border:1px solid transparent;
    transition: background var(--t) var(--ease),color var(--t) var(--ease),border var(--t) var(--ease);
}
.side-nav a:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.95); border-color:rgba(255,255,255,0.08); }
.side-nav a.active { background:rgba(56,189,248,0.18); color:var(--ice-bright); border-color:rgba(56,189,248,0.30); }
.side-nav a svg { flex-shrink:0; opacity:0.78; }
.side-nav a.active svg,.side-nav a:hover svg { opacity:1; }

.content-area {
    flex:1; padding:48px 44px 40px;
    display:flex; flex-direction:column;
    background:var(--card); position:relative;
    transition: background var(--t) var(--ease);
}
.content-area::before {
    content:'';
    position:absolute; top:0; left:44px; right:44px; height:1px;
    background:linear-gradient(to right,transparent,var(--ice-bright),transparent);
    opacity:0.22;
}

.content-top { display:flex; justify-content:flex-end; margin-bottom:8px; margin-top:-12px; }

h2 {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:2rem; font-weight:500; letter-spacing:-0.02em; line-height:1.1;
    color:var(--ink); margin-bottom:28px;
    transition: color var(--t) var(--ease);
}
h2 em { font-style:italic; font-weight:300; color:var(--muted); }

.text-block { color:var(--muted); font-size:0.88rem; line-height:1.75; margin-bottom:28px; max-width:42ch; }

.theme-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:10px;
    background:var(--toggle-bg); color:var(--toggle-c);
    border:1px solid var(--border); cursor:pointer;
    transition: background var(--t) var(--ease),color var(--t) var(--ease),border var(--t) var(--ease);
    flex-shrink:0;
}
.theme-toggle:hover { background:rgba(56,189,248,0.12); color:var(--ice-bright); border-color:rgba(56,189,248,0.3); }
.theme-toggle .icon-sun  { display:none; }
.theme-toggle .icon-moon { display:block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

.btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 22px; border-radius:var(--radius-btn);
    font-family:'Outfit',sans-serif; font-weight:500; font-size:0.88rem; letter-spacing:0.01em;
    text-decoration:none; border:none; cursor:pointer;
    transition: transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),opacity var(--t) var(--ease);
}
.btn:hover  { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }

.link-group { display:flex; flex-direction:column; gap:10px; }

.btn-social { color:white; position:relative; overflow:hidden; }
.btn-social::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background var(--t) var(--ease); }
.btn-social:hover::after { background:rgba(255,255,255,0.08); }
.btn-social.insta { background:linear-gradient(110deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow:0 4px 16px rgba(220,39,67,0.28); }
.btn-social.insta:hover { box-shadow:0 6px 24px rgba(220,39,67,0.42); }
.btn-social.yt { background:#FF0000; box-shadow:0 4px 16px rgba(255,0,0,0.22); }
.btn-social.yt:hover { box-shadow:0 6px 24px rgba(255,0,0,0.36); }

.btn-badge { margin-left:auto; font-size:0.7rem; font-weight:600; background:rgba(255,255,255,0.18); padding:2px 8px; border-radius:100px; opacity:0.88; }

.btn-primary { background:var(--ice-bright); color:var(--ink); font-weight:600; box-shadow:0 4px 16px rgba(56,189,248,0.30); }
.btn-primary:hover { background:#0ea5e9; color:white; box-shadow:0 6px 24px rgba(56,189,248,0.45); }

.btn-swap { background:var(--snow); color:var(--ink); border:1px solid var(--border); font-weight:500; transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease); }
.btn-swap:hover { background:rgba(56,189,248,0.08); border-color:rgba(56,189,248,0.35); color:#0284c7; }

.btn-outline { background:transparent; border:1px solid var(--border); color:var(--muted); font-size:0.8rem; padding:11px 14px; font-weight:400; transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease); }
.btn-outline:hover { border-color:var(--ice-bright); color:var(--ink); background:rgba(56,189,248,0.04); }

.btn.large { padding:16px 28px; font-size:0.95rem; }

.divider { display:flex; align-items:center; margin:26px 0 20px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.divider span { padding:0 16px; font-size:0.65rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--silver); }

.grid-links { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.info-box { background:var(--snow); padding:16px 18px; border-radius:14px; border:1px solid var(--border); transition:border-color var(--t) var(--ease),background var(--t) var(--ease); }
.info-box:hover { border-color:rgba(56,189,248,0.35); }
.info-box span { display:block; font-size:0.65rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--silver); margin-bottom:5px; }
.info-box strong { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.1rem; font-weight:500; color:var(--ink); }

.legal-notice { font-size:0.78rem; color:var(--muted); background:var(--snow); padding:18px 20px; border-radius:14px; border:1px solid var(--border); line-height:1.8; transition:background var(--t) var(--ease); }
.mt-4 { margin-top:18px; }

footer { margin-top:auto; padding-top:28px; text-align:center; font-size:0.72rem; color:var(--silver); letter-spacing:0.02em; }
footer a { color:var(--silver); text-decoration:none; transition:color var(--t) var(--ease); }
footer a:hover { color:var(--ice-bright); }

.route-view { flex:1; display:flex; flex-direction:column; }
.anim-fade { animation:routeFade 0.45s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes routeFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.anim-fade > * { animation:childFade 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.anim-fade > *:nth-child(1){animation-delay:0.05s}
.anim-fade > *:nth-child(2){animation-delay:0.10s}
.anim-fade > *:nth-child(3){animation-delay:0.15s}
.anim-fade > *:nth-child(4){animation-delay:0.20s}
.anim-fade > *:nth-child(5){animation-delay:0.25s}
.anim-fade > *:nth-child(6){animation-delay:0.30s}
@keyframes childFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:720px) {
    body { align-items:flex-start; background-image:none; }
    :root:not([data-theme="dark"]) body { background:linear-gradient(160deg,#e8f4fd 0%,#dbeef8 55%,#e2f0f9 100%); }
    [data-theme="dark"] body { background:linear-gradient(160deg,#0B1120 0%,#0D1829 55%,#091524 100%); }

    .layout-wrapper { display:none; }
    .mobile-profile { display:flex; flex-direction:column; align-items:center; width:100%; min-height:100dvh; padding:0 0 48px; }

    .m-hero { width:100%; display:flex; flex-direction:column; align-items:center; padding:52px 24px 32px; position:relative; }
    .m-hero::before { content:''; position:absolute; top:30px; left:50%; transform:translateX(-50%); width:220px; height:220px; background:radial-gradient(circle,rgba(56,189,248,0.15) 0%,transparent 70%); pointer-events:none; }

    .m-hero-top { position:absolute; top:16px; right:16px; }
    .m-hero-top .theme-toggle { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.6); }
    :root:not([data-theme="dark"]) .m-hero-top .theme-toggle { background:rgba(8,12,24,0.07); border-color:rgba(8,12,24,0.10); color:var(--muted); }
    .m-hero-top .theme-toggle:hover { background:rgba(56,189,248,0.15); border-color:rgba(56,189,248,0.3); color:var(--ice-bright); }

    .m-avatar { width:110px; height:110px; border-radius:50%; object-fit:cover; border:3px solid rgba(168,216,234,0.35); box-shadow:0 0 0 6px rgba(56,189,248,0.08),0 12px 40px rgba(0,0,0,0.35); margin-bottom:18px; position:relative; z-index:1; animation:avatarIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
    @keyframes avatarIn { from{opacity:0;transform:scale(0.82)} to{opacity:1;transform:scale(1)} }

    .m-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:2.1rem; font-weight:500; line-height:1.05; text-align:center; margin-bottom:4px; animation:fadeUp 0.5s 0.10s cubic-bezier(0.16,1,0.3,1) both; }
    :root:not([data-theme="dark"]) .m-name { color:#0B1120; }
    [data-theme="dark"] .m-name { color:#F0F8FF; }
    .m-name em { font-style:italic; font-weight:300; opacity:0.6; }

    .m-tagline { font-size:0.72rem; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; animation:fadeUp 0.5s 0.16s cubic-bezier(0.16,1,0.3,1) both; }
    [data-theme="dark"] .m-tagline { color:rgba(168,216,234,0.75); }
    :root:not([data-theme="dark"]) .m-tagline { color:var(--muted); }

    .m-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.65rem; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:var(--ice-bright); background:rgba(56,189,248,0.10); border:1px solid rgba(56,189,248,0.22); padding:4px 12px; border-radius:100px; animation:fadeUp 0.5s 0.22s cubic-bezier(0.16,1,0.3,1) both; }

    .m-nav { display:flex; gap:6px; padding:0 20px; width:100%; justify-content:center; margin-bottom:22px; animation:fadeUp 0.5s 0.28s cubic-bezier(0.16,1,0.3,1) both; }
    .m-nav a { flex:1; max-width:120px; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border-radius:12px; font-family:'Outfit',sans-serif; font-size:0.75rem; font-weight:500; text-decoration:none; transition:background var(--t) var(--ease),color var(--t) var(--ease),border var(--t) var(--ease); }
    :root:not([data-theme="dark"]) .m-nav a { color:rgba(8,12,24,0.5); background:rgba(8,12,24,0.05); border:1px solid rgba(8,12,24,0.08); }
    [data-theme="dark"] .m-nav a { color:rgba(240,248,255,0.50); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); }
    .m-nav a:hover { background:rgba(56,189,248,0.10); color:var(--ice-bright); border-color:rgba(56,189,248,0.22); }
    .m-nav a.active { background:rgba(56,189,248,0.15); color:var(--ice-bright); border-color:rgba(56,189,248,0.30); font-weight:600; }

    .m-card { width:calc(100% - 28px); border-radius:20px; padding:24px 20px 20px; display:flex; flex-direction:column; gap:10px; animation:fadeUp 0.5s 0.34s cubic-bezier(0.16,1,0.3,1) both; }
    :root:not([data-theme="dark"]) .m-card { background:rgba(255,255,255,0.80); border:1px solid rgba(203,213,225,0.60); backdrop-filter:blur(12px); box-shadow:0 4px 24px rgba(8,12,24,0.06); }
    [data-theme="dark"] .m-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(8px); }

    .m-card h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.55rem; font-weight:500; letter-spacing:-0.01em; margin-bottom:8px; }
    :root:not([data-theme="dark"]) .m-card h2 { color:var(--ink); }
    [data-theme="dark"] .m-card h2 { color:#F0F8FF; }
    .m-card h2 em { font-style:italic; font-weight:300; opacity:0.55; }

    .m-card .text-block { margin-bottom:0; }
    :root:not([data-theme="dark"]) .m-card .text-block { color:var(--muted); }
    [data-theme="dark"] .m-card .text-block { color:rgba(168,216,234,0.65); }

    .m-card .btn { border-radius:14px; font-size:0.88rem; padding:14px 18px; }
    .m-card .btn-swap { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color:rgba(240,248,255,0.75); }
    :root:not([data-theme="dark"]) .m-card .btn-swap { background:var(--snow); color:var(--ink); border-color:var(--border); }
    .m-card .btn-swap:hover { background:rgba(56,189,248,0.10); border-color:rgba(56,189,248,0.25); color:var(--ice-bright); }

    .m-card .btn-outline { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:rgba(168,216,234,0.65); font-size:0.78rem; padding:11px 12px; }
    :root:not([data-theme="dark"]) .m-card .btn-outline { background:transparent; border-color:var(--border); color:var(--muted); }
    .m-card .btn-outline:hover { background:rgba(56,189,248,0.08); border-color:rgba(56,189,248,0.25); color:var(--ice-bright); }

    .m-card .grid-links { grid-template-columns:1fr; }

    .m-card .divider::before,.m-card .divider::after { background:rgba(255,255,255,0.10); }
    :root:not([data-theme="dark"]) .m-card .divider::before,:root:not([data-theme="dark"]) .m-card .divider::after { background:var(--border); }
    .m-card .divider span { color:rgba(168,216,234,0.35); }
    :root:not([data-theme="dark"]) .m-card .divider span { color:var(--silver); }

    .m-card .info-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
    .m-card .info-box { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); padding:12px 14px; border-radius:12px; }
    :root:not([data-theme="dark"]) .m-card .info-box { background:var(--snow); border-color:var(--border); }
    .m-card .info-box span { color:rgba(168,216,234,0.40); }
    :root:not([data-theme="dark"]) .m-card .info-box span { color:var(--silver); }
    .m-card .info-box strong { font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:500; color:#F0F8FF; }
    :root:not([data-theme="dark"]) .m-card .info-box strong { color:var(--ink); }

    .m-card .legal-notice { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); color:rgba(168,216,234,0.55); font-size:0.76rem; }
    :root:not([data-theme="dark"]) .m-card .legal-notice { background:var(--snow); border-color:var(--border); color:var(--muted); }

    .m-card .btn-primary { background:var(--ice-bright); color:var(--ink); }
    .m-card .btn-primary:hover { background:#0ea5e9; color:white; }

    .m-footer { margin-top:24px; text-align:center; font-size:0.68rem; letter-spacing:0.04em; animation:fadeUp 0.5s 0.40s cubic-bezier(0.16,1,0.3,1) both; }
    :root:not([data-theme="dark"]) .m-footer { color:var(--silver); }
    [data-theme="dark"] .m-footer { color:rgba(168,216,234,0.28); }
    .m-footer a { text-decoration:none; color:inherit; }
    .m-footer a:hover { color:var(--ice-bright); }

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

@media (max-width:380px) {
    .m-card .info-grid { grid-template-columns:1fr; }
    .m-nav a { font-size:0.68rem; padding:8px 6px; }
}