/* ============================================================
   Nafiull Hossain — Premium Cyber-Tech Portfolio
   Day Mode (default) + Dark Mode. All colors dual-mode safe.
   Palette: #215E61 · #4274D9 · #FF9E20 · #F7D87F · #659287 · #B1D3B9
   ============================================================ */

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

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
    --c-primary:   #215E61;
    --c-blue:      #4274D9;
    --c-accent:    #FF9E20;
    --c-highlight: #F7D87F;
    --c-success:   #659287;
    --c-soft:      #B1D3B9;

    /* Light surfaces */
    --bg:       #F4F2F2;
    --srf:      #FFFFFF;
    --srf2:     #EDECEA;
    --bdr:      rgba(0,0,0,.08);
    --bdr2:     rgba(0,0,0,.13);

    /* Light text — WCAG AA+ contrast on white */
    --tx:   #141820;
    --tx2:  #44546A;
    --tx3:  #7A8FA6;

    /* Shadows */
    --sh1: 0 2px 8px  rgba(0,0,0,.06);
    --sh2: 0 6px 24px rgba(0,0,0,.09);
    --sh3: 0 14px 48px rgba(0,0,0,.12);
    --sh4: 0 24px 80px rgba(0,0,0,.15);

    /* Glass */
    --gl:    rgba(255,255,255,.70);
    --gl-bdr:rgba(255,255,255,.55);

    /* Gradients */
    --gp: linear-gradient(135deg,#215E61,#4274D9);
    --ga: linear-gradient(135deg,#FF9E20,#F7D87F);
    --gh: linear-gradient(135deg,#215E61 0%,#4274D9 55%,#FF9E20 100%);

    --ff-h: 'Space Grotesk', sans-serif;
    --ff-b: 'Inter', sans-serif;

    --ease: cubic-bezier(.16,1,.3,1);
    --spring: cubic-bezier(.34,1.56,.64,1);

    --nav-h: 68px;
    --spy: 110px;
}

/* Dark mode */
[data-theme="dark"] {
    --bg:    #1D2128;
    --srf:   #252B35;
    --srf2:  #2D3341;
    --bdr:   rgba(255,255,255,.07);
    --bdr2:  rgba(255,255,255,.13);
    --tx:    #E8ECF2;
    --tx2:   #9AAAB8;
    --tx3:   #556070;
    --sh1: 0 2px 8px  rgba(0,0,0,.30);
    --sh2: 0 6px 24px rgba(0,0,0,.38);
    --sh3: 0 14px 48px rgba(0,0,0,.44);
    --sh4: 0 24px 80px rgba(0,0,0,.50);
    --gl:    rgba(37,43,53,.78);
    --gl-bdr:rgba(255,255,255,.09);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; cursor:none; }
html { overflow-x:hidden; scroll-behavior:auto; }
body {
    font-family:var(--ff-b); font-size:17px; line-height:1.65;
    color:var(--tx); background:var(--bg); overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition:background .5s ease,color .5s ease;
}
h1,h2,h3,h4 { font-family:var(--ff-h); font-weight:700; line-height:1.15; color:var(--tx); }
a { color:var(--c-blue); text-decoration:none; cursor:none; }
button,input,textarea { font-family:inherit; cursor:none; outline:none; border:none; }
img { max-width:100%; display:block; }
::selection { background:rgba(66,116,217,.22); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--c-primary); border-radius:8px; }

/* Hardware acceleration for animating layers */
.blob, .c-ring, .c-dot, .slide-img, .gc, .skc, .p-card, .avail-dot::after {
    will-change: transform, opacity;
    transform: translate3d(0,0,0);
}

/* ── CURSOR ───────────────────────────────────────────────── */
.c-ring {
    position:fixed; top:0; left:0;
    width:30px; height:30px; border-radius:50%;
    border:2px solid var(--c-blue);
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .18s var(--ease),height .18s var(--ease),border-color .18s,background .18s;
}
.c-dot {
    position:fixed; top:0; left:0;
    width:6px; height:6px; background:var(--c-accent);
    border-radius:50%; pointer-events:none; z-index:10000;
    transform:translate(-50%,-50%);
    box-shadow:0 0 8px rgba(255,158,32,.5);
}
.c-ring.on { width:50px; height:50px; background:rgba(66,116,217,.08); border-color:var(--c-accent); }
@media(max-width:1024px) { .c-ring,.c-dot{display:none} *{cursor:auto!important} }

/* ── BACKGROUND ──────────────────────────────────────────── */
.bg-layer { position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden; }
#ptx { position:absolute; inset:0; width:100%; height:100%; }
.grid-fx {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(66,116,217,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(66,116,217,.05) 1px,transparent 1px);
    background-size:50px 50px;
}
[data-theme="dark"] .grid-fx {
    background-image:
        linear-gradient(rgba(66,116,217,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(66,116,217,.08) 1px,transparent 1px);
}
.blob { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; animation:bdrift 26s ease-in-out infinite alternate; }
.b1 { top:-8%; right:-4%; width:520px; height:520px; background:radial-gradient(circle,rgba(33,94,97,.20) 0%,rgba(66,116,217,.12) 60%,transparent 100%); }
.b2 { bottom:0; left:-6%; width:580px; height:580px; background:radial-gradient(circle,rgba(66,116,217,.17) 0%,rgba(33,94,97,.07) 70%,transparent 100%); animation-delay:-10s; }
.b3 { top:40%; left:36%; width:380px; height:380px; background:radial-gradient(circle,rgba(255,158,32,.12) 0%,transparent 70%); animation-delay:-5s; }
[data-theme="dark"] .b1 { background:radial-gradient(circle,rgba(33,94,97,.35) 0%,rgba(66,116,217,.22) 60%,transparent 100%); }
[data-theme="dark"] .b2 { background:radial-gradient(circle,rgba(66,116,217,.28) 0%,rgba(33,94,97,.12) 70%,transparent 100%); }
[data-theme="dark"] .b3 { background:radial-gradient(circle,rgba(255,158,32,.18) 0%,transparent 70%); }

/* ── PAGE LOADER ─────────────────────────────────────────── */
.loader {
    position:fixed; inset:0; z-index:99999; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
}
.loader-box { display:flex; flex-direction:column; align-items:center; gap:18px; }
.loader-logo { font-family:var(--ff-h); font-size:2.2rem; font-weight:800; letter-spacing:-.04em; display:flex; align-items:center; }
.loader-logo .lb { color:var(--c-accent); font-weight:300; font-size:2.4rem; }
.loader-logo .lt { color:var(--tx); }
.loader-bar-bg { width:180px; height:3px; background:var(--srf2); border-radius:8px; overflow:hidden; }
.loader-bar { height:100%; width:0%; background:var(--gh); border-radius:8px; transition:width .08s linear; }
.loader-msg { font-size:.8rem; color:var(--tx3); font-weight:500; letter-spacing:.05em; }

/* ── NAVBAR ──────────────────────────────────────────────── */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
    border-bottom:1px solid transparent;
}
.nav.sc {
    background:rgba(244,242,242,.90);
    backdrop-filter:saturate(180%) blur(20px);
    border-color:var(--bdr);
    box-shadow:var(--sh1);
}
[data-theme="dark"] .nav.sc { background:rgba(29,33,40,.90); }
.nav-in {
    max-width:1200px; margin:0 auto;
    height:var(--nav-h); padding:0 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo { display:flex; align-items:center; gap:2px; font-family:var(--ff-h); font-weight:700; color:var(--tx); }
.lo-br { color:var(--c-accent); font-weight:300; font-size:1.6rem; line-height:1; }
.lo-tx { font-size:1.15rem; letter-spacing:-.03em; display:flex; align-items:center; }
.lo-dot { width:6px; height:6px; background:var(--c-success); border-radius:50%; margin-left:2px; animation:pulse 2s infinite; }
.nl { display:flex; list-style:none; gap:2px; }
.nl-a { font-size:.92rem; font-weight:500; color:var(--tx2); padding:7px 13px; border-radius:8px; transition:all .18s ease; }
.nl-a:hover { color:var(--tx); background:rgba(66,116,217,.09); }
.nl-a.active { color:var(--c-blue); background:rgba(66,116,217,.11); font-weight:600; }
.nav-ctrl { display:flex; align-items:center; gap:10px; }
.ibtn {
    width:38px; height:38px; border-radius:10px; background:transparent;
    color:var(--tx2); display:flex; align-items:center; justify-content:center;
    border:1px solid var(--bdr); transition:all .18s var(--spring);
}
.ibtn svg { width:17px; height:17px; }
.ibtn:hover { background:var(--srf); color:var(--tx); border-color:var(--bdr2); transform:scale(1.07); }
.hbg { display:none; flex-direction:column; gap:5px; width:38px; height:38px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--bdr); border-radius:10px; }
.hbg span { width:18px; height:1.5px; background:var(--tx); border-radius:4px; transition:all .3s var(--ease); }
.hbg.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.hbg.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hbg.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }

/* ── LAYOUT / SECTION ────────────────────────────────────── */
.sec { padding:var(--spy) 28px; max-width:1200px; margin:0 auto; }
.sec-hd { text-align:center; margin-bottom:56px; }
.stag { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-blue); margin-bottom:10px; }
.stag svg { width:12px; height:12px; }
.stit { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.04em; color:var(--tx); }
.stit span { background:var(--gp); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ssub { margin-top:14px; font-size:1.05rem; color:var(--tx2); max-width:520px; margin-left:auto; margin-right:auto; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:10px;
    font-family:var(--ff-b); font-size:.95rem; font-weight:600;
    transition:all .18s var(--spring); position:relative; overflow:hidden;
}
.btn svg { width:16px; height:16px; }
.btn-p { background:var(--gp); color:#fff; box-shadow:0 4px 18px rgba(33,94,97,.30); }
.btn-p:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 28px rgba(33,94,97,.42); }
.btn-p::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:.55s; }
.btn-p:hover::before { left:110%; }
.btn-cv {
    background: rgba(52, 169, 157, 0.15);
    color: #34A99D;
    border: 1.5px solid rgba(52, 169, 157, 0.4);
    box-shadow: 0 4px 14px rgba(52, 169, 157, 0.1);
    backdrop-filter: blur(12px);
}
.btn-cv:hover {
    background: #34A99D;
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px rgba(52, 169, 157, 0.35);
}
.nav-cv-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-right: 8px;
}
.mobile-cv-item {
    display: none;
}
.btn-o { background:var(--srf); color:var(--tx); border:1.5px solid var(--bdr2); box-shadow:var(--sh1); }
.btn-o:hover { border-color:var(--c-blue); color:var(--c-blue); transform:translateY(-2px); box-shadow:var(--sh2); }

/* ── GLASS CARD ──────────────────────────────────────────── */
.gc {
    background:var(--gl); backdrop-filter:blur(14px);
    border:1px solid var(--gl-bdr); border-radius:20px; box-shadow:var(--sh2);
    transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.gc:hover { transform:translateY(-5px); box-shadow:var(--sh4); border-color:rgba(66,116,217,.25); }

/* ── SOCIAL BUTTONS ──────────────────────────────────────── */
.soc {
    width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:var(--srf); border:1px solid var(--bdr2); color:var(--tx2);
    box-shadow:var(--sh1); transition:all .18s var(--spring);
}
.soc svg { width:18px; height:18px; }
.soc:hover { background:var(--gp); color:#fff; border-color:transparent; transform:translateY(-4px) scale(1.07); box-shadow:0 8px 22px rgba(33,94,97,.38); }

/* ── HERO ────────────────────────────────────────────────── */
.hero-wrap { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:var(--nav-h); }
.hero { max-width:1200px; margin:0 auto; padding:60px 28px 0; width:100%; }
.hero-g { display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }

.avail-pill {
    display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
    background:rgba(101,146,135,.12); border:1px solid rgba(101,146,135,.28);
    padding:6px 16px; border-radius:100px; color:var(--c-success);
    font-size:.82rem; font-weight:700;
}
.avail-dot { width:8px; height:8px; background:var(--c-success); border-radius:50%; flex-shrink:0; position:relative; }
.avail-dot::after { content:''; position:absolute; inset:0; background:var(--c-success); border-radius:50%; animation:ripple 2s ease-out infinite; }

.kicker { font-size:.88rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-accent); margin-bottom:12px; }
.h-title { font-size:clamp(2.8rem,5.5vw,4.5rem); font-weight:800; letter-spacing:-.05em; margin-bottom:16px; }
.h-name { background:var(--gh); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200%; animation:gshift 5s ease infinite; }
.h-type { font-size:clamp(1.05rem,2.2vw,1.55rem); font-weight:500; color:var(--tx2); margin-bottom:20px; display:flex; align-items:center; gap:6px; min-height:2em; }
.tw-word { color:var(--tx); font-weight:700; }
.tw-cur { display:inline-block; width:2.5px; height:1.1em; background:var(--c-blue); border-radius:2px; margin-left:1px; vertical-align:middle; animation:blink .85s ease-in-out infinite; }
.h-sub { font-size:1.05rem; color:var(--tx2); max-width:520px; margin-bottom:28px; line-height:1.76; }
.h-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; position:relative; z-index:10; }
.h-soc { display:flex; gap:10px; position:relative; z-index:10; }

/* Profile */
.hero-art { display:flex; justify-content:center; align-items:center; }
.p-wrap { position:relative; width:310px; perspective:1200px; }
.p-glow { position:absolute; inset:-20px; border-radius:32px; background:var(--gh); opacity:.18; filter:blur(36px); animation:gpulse 4s ease-in-out infinite alternate; z-index:0; }
.p-card {
    position:relative; z-index:1;
    background:var(--gl); backdrop-filter:blur(16px);
    border:1px solid var(--gl-bdr); border-radius:24px; box-shadow:var(--sh4);
    overflow:hidden; transform-style:preserve-3d;
}
.p-img-box { width:100%; aspect-ratio:4/5; overflow:hidden; position:relative; }
.slide-img {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transform:scale(1.08);
    transition:opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}
.slide-img.active { opacity:1; transform:scale(1); }
.p-foot { padding:14px 18px; display:flex; justify-content:space-between; align-items:center; background:var(--srf); border-top:1px solid var(--bdr); position:relative; z-index:2; }
.p-name { font-size:.93rem; font-weight:700; color:var(--tx); }
.p-role { font-size:.78rem; color:var(--tx2); margin-top:2px; }
.p-badge { display:flex; align-items:center; gap:5px; background:rgba(101,146,135,.12); border:1px solid rgba(101,146,135,.28); padding:4px 11px; border-radius:100px; font-size:.73rem; font-weight:700; color:var(--c-success); }
.p-bdot { width:6px; height:6px; background:var(--c-success); border-radius:50%; animation:pulse 2s infinite; }

/* Chips */
.chip {
    position:absolute; z-index:2;
    background:var(--gl); backdrop-filter:blur(14px);
    border:1px solid var(--gl-bdr); border-radius:14px;
    padding:10px 14px; display:flex; align-items:center; gap:10px;
    box-shadow:var(--sh3);
}
.chi { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chi svg { width:15px; height:15px; }
.chi-b { background:rgba(66,116,217,.15); color:var(--c-blue); }
.chi-g { background:rgba(101,146,135,.15); color:var(--c-success); }
.chi-o { background:rgba(255,158,32,.15); color:var(--c-accent); }
.ch-t { font-size:.78rem; font-weight:700; color:var(--tx); }
.ch-s { font-size:.7rem; color:var(--tx2); margin-top:1px; }
.ch1 { top:10%; right:-26%; animation:fchip 7s ease-in-out infinite alternate; }
.ch2 { bottom:20%; left:-30%; animation:fchip 9s ease-in-out infinite alternate-reverse; }
.ch3 { bottom:6%; right:-22%; animation:fchip 8s ease-in-out infinite alternate; animation-delay:-3s; }

/* Marquee */
.mq-wrap { overflow:hidden; border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); padding:14px 0; margin-top:52px; background:var(--srf); }
.mq-track { display:flex; gap:24px; white-space:nowrap; animation:mq 28s linear infinite; font-size:.84rem; font-weight:600; color:var(--tx2); }
.mq-track span { flex-shrink:0; }
.mx { color:var(--c-accent); }

/* ── ABOUT ───────────────────────────────────────────────── */
.ab-g { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start; }
.ab-lead { font-size:1.2rem; font-weight:600; color:var(--tx); line-height:1.6; margin-bottom:18px; }
.ab-p { font-size:1rem; color:var(--tx2); margin-bottom:16px; line-height:1.8; }
.ab-p strong { color:var(--tx); font-weight:600; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.stat-c { background:var(--srf); border:1px solid var(--bdr); border-radius:16px; padding:18px 14px; text-align:center; box-shadow:var(--sh1); transition:transform .3s var(--spring),box-shadow .3s ease; }
.stat-c:hover { transform:translateY(-5px); box-shadow:var(--sh3); }
.stat-n { font-family:var(--ff-h); font-size:2.2rem; font-weight:800; letter-spacing:-.04em; color:var(--c-blue); }
.stat-l { font-size:.77rem; font-weight:500; color:var(--tx3); margin-top:4px; }
.ab-card { padding:26px; }
.card-ttl { font-size:1rem; font-weight:700; color:var(--tx); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.card-ico { width:32px; height:32px; border-radius:8px; background:rgba(66,116,217,.10); color:var(--c-blue); display:flex; align-items:center; justify-content:center; }
.card-ico svg { width:14px; height:14px; }
.dl { display:flex; flex-direction:column; }
.dr { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--bdr); }
.dr.last { border-bottom:none; }
.dlb { width:100px; font-size:.83rem; font-weight:600; color:var(--tx3); flex-shrink:0; }
.dv  { font-size:.88rem; color:var(--tx); font-weight:500; }

/* ── SKILLS ──────────────────────────────────────────────── */
.flt-row { display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.flt-btn { padding:9px 20px; border-radius:100px; font-size:.875rem; font-weight:600; color:var(--tx2); background:var(--srf); border:1px solid var(--bdr2); box-shadow:var(--sh1); transition:all .18s var(--ease); }
.flt-btn:hover { color:var(--tx); background:var(--srf2); transform:translateY(-1px); }
.flt-btn.active { background:var(--gp); color:#fff; border-color:transparent; box-shadow:0 4px 18px rgba(33,94,97,.35); }
.sk-g { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:18px; }
.skc {
    background:var(--srf); border:1px solid var(--bdr); border-radius:18px;
    padding:22px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:13px;
    box-shadow:var(--sh1); transition:all .3s var(--spring); position:relative; overflow:hidden;
}
.skc::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); transform:skewX(-15deg); transition:left .55s var(--ease); pointer-events:none; }
.skc:hover::after { left:140%; }
.skc:hover { transform:translateY(-7px) scale(1.01); box-shadow:var(--sh4); border-color:rgba(66,116,217,.22); }
.si { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--spring); }
.si svg { width:22px; height:22px; }
.skc:hover .si { transform:scale(1.13) rotate(-5deg); }
.si-b  { background:rgba(66,116,217,.12); color:var(--c-blue); }
.si-i  { background:rgba(88,86,214,.12);  color:#5856D6; }
.si-t  { background:rgba(0,199,190,.12);  color:#00C7BE; }
.si-g  { background:rgba(101,146,135,.12);color:var(--c-success); }
.si-o  { background:rgba(255,158,32,.12); color:var(--c-accent); }
.si-p  { background:rgba(33,94,97,.12);   color:var(--c-primary); }
.si-c  { background:rgba(50,173,230,.12); color:#32ADE6; }
.si-pk { background:rgba(255,45,85,.12);  color:#FF2D55; }
.si-pu { background:rgba(175,82,222,.12); color:#AF52DE; }
.sk-n { font-size:.93rem; font-weight:700; color:var(--tx); letter-spacing:-.01em; }
.sk-s { font-size:.79rem; color:var(--tx2); }

/* ── TIMELINE ────────────────────────────────────────────── */
.tl { position:relative; max-width:880px; margin:0 auto; }
.tl-ln { position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:linear-gradient(to bottom,transparent,var(--bdr2) 8%,var(--bdr2) 92%,transparent); transform:translateX(-50%); }
.tl-i { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-bottom:48px; position:relative; align-items:start; }
.tl-i:last-child { margin-bottom:0; }
.tl-dt { grid-column:1; padding-top:28px; text-align:right; padding-right:24px; font-family:var(--ff-h); font-size:.98rem; font-weight:700; color:var(--c-accent); }
.tl-i > .gc { grid-column:2; padding-left:24px; }
.tl-r .tl-dt { grid-column:2; text-align:left; padding-left:24px; padding-right:0; }
.tl-r > .gc { grid-column:1; order:-1; }
.tl-dot { position:absolute; left:50%; top:28px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:3px solid var(--c-blue); transform:translateX(-50%); z-index:5; box-shadow:0 0 0 4px rgba(66,116,217,.16); transition:all .3s var(--spring); }
.tl-dot-a { border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(255,158,32,.18); }
.tl-i:hover .tl-dot { background:var(--c-blue); transform:translateX(-50%) scale(1.45); }
.tl-i:hover .tl-dot-a { background:var(--c-accent); }
.tl-card { padding:22px; }
.tl-role { font-size:1.08rem; font-weight:700; color:var(--tx); margin-bottom:4px; }
.tl-org  { font-size:.88rem; font-weight:600; color:var(--c-blue); margin-bottom:14px; }
.tl-p    { font-size:.88rem; color:var(--tx2); line-height:1.66; }
.tl-ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.tl-ul li { font-size:.88rem; color:var(--tx2); padding-left:14px; position:relative; line-height:1.55; }
.tl-ul li::before { content:'›'; position:absolute; left:0; color:var(--c-accent); font-weight:700; }
.tl-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.tg { font-size:.71rem; font-weight:600; padding:3px 10px; border-radius:6px; background:rgba(33,94,97,.09); border:1px solid rgba(33,94,97,.18); color:var(--c-primary); }
[data-theme="dark"] .tg { background:rgba(177,211,185,.08); border-color:rgba(177,211,185,.18); color:var(--c-soft); }
.edu-b { display:inline-flex; align-items:center; gap:5px; margin-top:12px; padding:4px 12px; border-radius:100px; font-size:.77rem; font-weight:600; background:rgba(247,216,127,.15); border:1px solid rgba(247,216,127,.35); color:#9A7500; }
[data-theme="dark"] .edu-b { color:var(--c-highlight); }
.edu-b svg { width:11px; height:11px; }
.ielts-box { display:flex; align-items:center; gap:20px; padding:22px 26px; margin-top:30px; }
.ielts-ico { width:48px; height:48px; border-radius:12px; background:rgba(66,116,217,.12); color:var(--c-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ielts-ico svg { width:22px; height:22px; }
.ielts-ttl { font-size:1rem; font-weight:700; color:var(--tx); margin-bottom:8px; }
.ielts-bands { display:flex; flex-wrap:wrap; gap:12px; }
.ielts-bands span { font-size:.84rem; color:var(--tx2); }
.ielts-bands strong { color:var(--c-blue); }

/* ── CONTACT ─────────────────────────────────────────────── */
.ct-g { display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:start; }
.ct-l { display:flex; flex-direction:column; gap:14px; }
.ci-row { display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--srf); border:1px solid var(--bdr); border-radius:15px; box-shadow:var(--sh1); transition:all .18s var(--ease); }
.ci-row:hover { border-color:rgba(66,116,217,.26); box-shadow:var(--sh2); transform:translateX(4px); }
.ci-ico { width:44px; height:44px; border-radius:11px; background:rgba(66,116,217,.10); color:var(--c-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci-ico svg { width:19px; height:19px; }
.ci-lbl { font-size:.73rem; font-weight:700; color:var(--tx3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.ci-val { font-size:.93rem; font-weight:600; color:var(--tx); }
.ct-soc { display:flex; gap:10px; padding:2px 0; }
.map-b { width:100%; height:190px; border-radius:15px; overflow:hidden; border:1px solid var(--bdr); box-shadow:var(--sh1); }
.map-b iframe { width:100%; height:100%; border:0; }
.ct-form { padding:26px; display:flex; flex-direction:column; gap:18px; }
.ff { display:flex; flex-direction:column; gap:6px; }
.fl { font-size:.81rem; font-weight:600; color:var(--tx2); }
.fc { padding:12px 15px; background:var(--srf2); border:1.5px solid var(--bdr2); border-radius:10px; font-size:.93rem; color:var(--tx); transition:all .18s ease; }
.fc:focus { border-color:var(--c-blue); background:var(--srf); box-shadow:0 0 0 4px rgba(66,116,217,.12); }
.fc::placeholder { color:var(--tx3); }
.fta { min-height:130px; resize:vertical; line-height:1.65; }
.fsb { width:100%; justify-content:center; font-size:1rem; padding:15px; }

/* ── FOOTER ──────────────────────────────────────────────── */
.ft { background:var(--srf); border-top:1px solid var(--bdr); padding:52px 28px 34px; }
.ft-in { max-width:1200px; margin:0 auto; }
.ft-g { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--bdr); }
.ft-brand p { font-size:.92rem; color:var(--tx2); margin-top:14px; max-width:280px; line-height:1.72; }
.ft-soc { display:flex; gap:8px; margin-top:18px; }
.ft-h { font-size:.93rem; font-weight:700; color:var(--tx); margin-bottom:14px; }
.ft-ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.ft-ul a { font-size:.9rem; color:var(--tx2); transition:all .18s ease; }
.ft-ul a:hover { color:var(--c-blue); padding-left:4px; }
.ref-n { font-size:.91rem; font-weight:600; color:var(--tx); margin-bottom:4px; }
.ref-d { font-size:.84rem; color:var(--tx2); line-height:1.6; }
.ft-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.ft-bot p { font-size:.84rem; color:var(--tx3); }
.back-top { background:var(--srf2); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes bdrift {
    0%   { transform:translate(0,0) scale(1); }
    33%  { transform:translate(22px,-38px) scale(1.07); }
    66%  { transform:translate(-14px,18px) scale(.96); }
    100% { transform:translate(0,0) scale(1); }
}
@keyframes ripple {
    0%   { transform:scale(1); opacity:.75; }
    100% { transform:scale(2.6); opacity:0; }
}
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.55; transform:scale(1.2); }
}
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fchip  { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-14px) rotate(1.5deg)} }
@keyframes gpulse { from{opacity:.14;transform:scale(.97)} to{opacity:.30;transform:scale(1.04)} }
@keyframes gshift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mq     { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* reveal helper */
.rv { opacity:0; transform:translateY(26px); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px) {
    :root { --spy:80px; }
    .hero-g { grid-template-columns:1fr; gap:48px; }
    .hero-copy { text-align:center; display:flex; flex-direction:column; align-items:center; }
    .h-title { font-size:clamp(2.6rem,8vw,3.8rem); }
    .h-type  { justify-content:center; }
    .hero-art { order:-1; }
    .ch1,.ch2,.ch3 { display:none; }
    .ab-g { grid-template-columns:1fr; }
    .tl-ln { left:24px; }
    .tl-dot { left:24px; }
    .tl-i  { grid-template-columns:1fr; padding-left:52px; gap:10px; }
    .tl-dt { grid-column:1!important; text-align:left!important; padding:0!important; order:-1; }
    .tl-i  > .gc { grid-column:1!important; order:0; }
    .tl-r  > .gc { order:0; }
    .ct-g { grid-template-columns:1fr; }
    .ft-g { grid-template-columns:1fr; }
    .ielts-box { flex-direction:column; text-align:center; }
    .ielts-bands { justify-content:center; }
}

@media(max-width:768px) {
    :root { --spy:64px; --nav-h:62px; }
    .hbg { display:flex; }
    .nl {
        position:fixed; top:0; right:-100%; left:auto;
        width:78%; max-width:300px; height:100vh;
        background:var(--srf); flex-direction:column; justify-content:center;
        gap:6px; padding:40px 26px; border-left:1px solid var(--bdr);
        box-shadow:-8px 0 30px rgba(0,0,0,.12);
        transition:right .3s var(--ease); z-index:998;
        backdrop-filter:blur(20px);
    }
    .nl.open { right:0; }
    .nl-a { font-size:1.1rem; padding:12px 16px; width:100%; }
    .h-title  { font-size:clamp(2.2rem,9vw,3.2rem); }
    .stats-row { grid-template-columns:1fr 1fr; }
    .sk-g  { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
    .ft-g  { gap:22px; }
    .ft-bot { flex-direction:column; text-align:center; }
    .nav-cv-btn { display: none; }
    .mobile-cv-item { display: block; }
}