/* ============================================================
   Dev — Portfolio Stylesheet
   ------------------------------------------------------------
   Organized by section. Design tokens live in :root at the top;
   every color, radius, and easing curve used below references
   one of those variables so the whole theme stays in one place.
   ============================================================ */


  :root{
    --bg:#080808;
    --bg-panel:#0e0f13;
    --bg-panel-2:#101319;
    --text:#f2f1ec;
    --muted:#8d8d97;
    --muted-2:#5c5c66;
    --blue:#2f6fff;
    --blue-soft:#5b8bff;
    --purple:#8b5cf6;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.14);
    --glass:rgba(255,255,255,0.03);
    --radius:18px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:transparent;
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            rgba(8,8,8,.70),
            rgba(8,8,8,.78)
        );
}
  ::selection{background:var(--blue);color:#fff;}
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.02em;}
  a{color:inherit;text-decoration:none;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .container{max-width:1180px;margin:0 auto;padding:0 32px;}
  section{position:relative;padding:140px 0;}
  @media(max-width:768px){section{padding:90px 0;} .container{padding:0 22px;}}

  /* scroll progress */
  #progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple));z-index:9999;width:0%;transition:width .1s linear;}

  /* cursor glow */
  #cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
    background:radial-gradient(circle,rgba(47,111,255,0.10),rgba(139,92,246,0.06) 40%,transparent 70%);
    transform:translate(-50%,-50%);transition:opacity .3s;will-change:transform;}

  /* nav */
  nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px 0;transition:background .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent;}
  nav.scrolled{background:rgba(8,8,8,0.72);backdrop-filter:blur(16px);border-color:var(--line);}
  nav .container{display:flex;align-items:center;justify-content:space-between;}
  .logo{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-0.02em;}
  .logo span{color:var(--blue-soft);}
  .nav-links{display:flex;gap:34px;font-size:14px;color:var(--muted);}
  .nav-links a{transition:color .25s;position:relative;}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{font-size:13px;padding:9px 18px;border:1px solid var(--line-strong);border-radius:99px;transition:all .3s var(--ease);}
  .nav-cta:hover{border-color:var(--blue-soft);box-shadow:0 0 24px rgba(47,111,255,0.25);}
  .nav-toggle{display:none;}
  @media(max-width:860px){.nav-links{display:none;} }

  /* hero */
  #hero{min-height:100vh;display:flex;align-items:center;background:transparent;padding-top:120px;overflow:hidden;}
  #hero-canvas{position:absolute;inset:0;z-index:0;opacity:.6;}
  .mesh{position:absolute;inset:-20%;z-index:0;background:
    radial-gradient(circle at 20% 20%, rgba(47,111,255,0.16), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(139,92,246,0.14), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(47,111,255,0.10), transparent 50%);
    filter:blur(40px);animation:drift 22s ease-in-out infinite alternate;}
  @keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(3%,-4%) scale(1.05);}}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .8fr;gap:60px;align-items:center;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center;}}
  .eyebrow{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;opacity:0;animation:fadeUp .8s var(--ease) .1s forwards;}
  .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue-soft);box-shadow:0 0 10px var(--blue-soft);}
  .hero h1{font-size:clamp(40px,6vw,74px);line-height:1.02;opacity:0;animation:fadeUp .9s var(--ease) .22s forwards;}
  .hero h1 .accent{background:linear-gradient(100deg,var(--blue-soft),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
  #typing{display:block;font-size:clamp(18px,2.4vw,26px);font-weight:400;color:var(--muted);margin-top:18px;font-family:'Space Grotesk';min-height:1.4em;opacity:0;animation:fadeUp .9s var(--ease) .34s forwards;}
  #typing .cursor-blink{display:inline-block;width:2px;background:var(--blue-soft);margin-left:2px;animation:blink 1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}
  .hero p.lead{margin-top:26px;max-width:520px;color:var(--muted);font-size:16px;opacity:0;animation:fadeUp .9s var(--ease) .46s forwards;}
  @media(max-width:900px){.hero p.lead{margin-left:auto;margin-right:auto;}}
  .hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;opacity:0;animation:fadeUp .9s var(--ease) .58s forwards;}
  @media(max-width:900px){.hero-buttons{justify-content:center;}}
  .btn{font-size:14px;padding:14px 26px;border-radius:99px;position:relative;transition:transform .35s var(--ease);display:inline-flex;align-items:center;gap:8px;}
  .btn-primary{background:linear-gradient(100deg,var(--blue),var(--purple));color:#fff;font-weight:500;}
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(47,111,255,0.35);}
  .btn-ghost{border:1px solid var(--line-strong);color:var(--text);}
  .btn-ghost:hover{transform:translateY(-3px);border-color:var(--blue-soft);}
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

  .hero-portrait{position:relative;display:flex;justify-content:center;opacity:0;animation:fadeUp 1s var(--ease) .3s forwards;}
  .portrait-frame{width:300px;height:300px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
    background:var(--bg-panel);border:1px solid var(--line);animation:float 6s ease-in-out infinite;}
  .portrait-frame::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;
    background:conic-gradient(from 0deg,var(--blue),var(--purple),var(--blue));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    animation:spin 8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
  .portrait-inner{width:270px;height:270px;border-radius:50%;background:linear-gradient(160deg,#15161c,#0a0a0d);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-size:64px;color:var(--muted-2);}
  .hero-globe{width:100%;height:100%;display:block;border-radius:50%;}
  .scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted-2);font-size:11px;font-family:'IBM Plex Mono';letter-spacing:.1em;z-index:2;}
  .scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--muted-2),transparent);animation:scrollcue 2s ease-in-out infinite;}
  @keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* reveal */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}

  .section-head{margin-bottom:56px;max-width:640px;}
  .section-head .eyebrow{margin-bottom:14px;animation:none;opacity:1;}
  .section-head h2{font-size:clamp(28px,3.6vw,42px);}
  .section-head p{color:var(--muted);margin-top:14px;font-size:15px;}

  /* glass card base */
  .glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(12px);transition:border-color .35s,transform .35s var(--ease),box-shadow .35s;}
  .glass:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.35);}

  /* about */
  #about .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start;}
  @media(max-width:860px){#about .grid{grid-template-columns:1fr;}}
  .about-portrait{
    width:100%;
    aspect-ratio:1;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.profile-image{
    width:320px;
    height:320px;
    object-fit:cover;
    border-radius:20px;
    transition:transform .4s ease;
}

.profile-image:hover{
    transform:scale(1.05);
}
  .about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
  @media(max-width:520px){.about-cards{grid-template-columns:1fr;}}
  .about-cards .glass{padding:22px;}
  .about-cards h4{font-size:14px;margin-bottom:8px;color:var(--blue-soft);}
  .about-cards p{font-size:13.5px;color:var(--muted);}
  #about .lead-text{font-size:19px;color:#dedee2;font-weight:300;line-height:1.7;}
  #about .lead-text b{color:var(--text);font-weight:500;}
  /* journey - signature constellation timeline */
  #journey{background:transparent;;}
  .journey-line-wrap{position:relative;padding-left:34px;}
  .journey-line-wrap::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--blue-soft),var(--purple),transparent);}
  .journey-item{position:relative;padding:0 0 46px 30px;}
  .journey-item:last-child{padding-bottom:0;}
  .journey-item::before{content:'';position:absolute;left:-40px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--bg-panel);border:2px solid var(--blue-soft);box-shadow:0 0 0 4px rgba(47,111,255,0.12);}
  .journey-item.future::before{border-color:var(--muted-2);box-shadow:none;border-style:dashed;}
  .journey-date{font-family:'IBM Plex Mono';font-size:12px;color:var(--blue-soft);letter-spacing:.05em;}
  .journey-item.future .journey-date{color:var(--muted-2);}
  .journey-item h4{font-size:18px;margin:6px 0 6px;}
  .journey-item p{color:var(--muted);font-size:14px;max-width:560px;}

  /* education */
  .edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media(max-width:768px){.edu-grid{grid-template-columns:1fr;}}
  .edu-card{padding:30px;}
  .edu-card .tag{font-family:'IBM Plex Mono';font-size:11px;color:var(--purple);letter-spacing:.08em;text-transform:uppercase;}
  .edu-card h3{font-size:21px;margin:10px 0 4px;}
  .edu-card .school{color:var(--muted);font-size:14px;margin-bottom:16px;}
  .edu-card ul{list-style:none;font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px;}
  .edu-card ul li::before{content:'—  ';color:var(--muted-2);}

  /* skills */
  .skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:860px){.skills-grid{grid-template-columns:1fr;}}
  .skill-col h4{font-family:'IBM Plex Mono';font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:18px;}
  .pill-row{display:flex;flex-wrap:wrap;gap:10px;}
  .pill{padding:9px 16px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:#d9d9de;transition:all .3s var(--ease);}
  .pill:hover{border-color:var(--blue-soft);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(47,111,255,0.18);}

  /* project */
  .projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media(max-width:900px){.projects-grid{grid-template-columns:1fr;}}
  .project-card{padding:36px;display:flex;flex-direction:column;}
  .project-card.featured{grid-column:1 / -1;}
  .project-tag{font-family:'IBM Plex Mono';font-size:11px;color:var(--blue-soft);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .project-tag .lang-dot{width:9px;height:9px;border-radius:50%;background:var(--purple);display:inline-block;margin-right:6px;}
  .project-card h3{font-size:24px;margin:14px 0 12px;}
  .project-card p{color:var(--muted);font-size:14.5px;margin-bottom:10px;}
  .project-card ul.feat-list{list-style:none;margin:14px 0 4px;display:flex;flex-direction:column;gap:7px;}
  .project-card ul.feat-list li{font-size:13.5px;color:#d9d9de;}
  .project-card ul.feat-list li::before{content:'—  ';color:var(--muted-2);}
  .stack-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;}
  .stack-chip{font-family:'IBM Plex Mono';font-size:11.5px;padding:6px 12px;background:rgba(255,255,255,0.04);border-radius:6px;color:var(--muted);}
  .project-links{display:flex;gap:14px;margin-top:auto;padding-top:6px;}
  .project-links a{font-size:13px;padding:11px 20px;border:1px solid var(--line-strong);border-radius:99px;transition:all .3s;}
  .project-links a:hover{border-color:var(--blue-soft);}

  /* learning roadmap */
  #learning{background:transparent;;}
  .learn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  @media(max-width:768px){.learn-grid{grid-template-columns:1fr;}}
  .learn-card{padding:24px 26px;}
  .learn-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .learn-top h4{font-size:15.5px;}
  .learn-top span{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted);}
  .bar{height:5px;border-radius:99px;background:rgba(255,255,255,0.06);overflow:hidden;}
  .bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--purple));width:0%;transition:width 1.4s var(--ease);}

  /* interests */
  .interest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  @media(max-width:860px){.interest-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.interest-grid{grid-template-columns:1fr 1fr;}}
  .interest-card{padding:26px 18px;text-align:center;font-size:13.5px;color:#d9d9de;}
  .interest-card .ic{font-size:22px;display:block;margin-bottom:10px;}

  /* filmmaking / travel dual */
  .dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media(max-width:768px){.dual-grid{grid-template-columns:1fr;}}
  .media-card{aspect-ratio:16/10;border-radius:14px;border:1px solid var(--line);background:var(--bg-panel-2);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-family:'IBM Plex Mono';font-size:12px;position:relative;overflow:hidden;}
  .media-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(47,111,255,0.12),transparent 60%);}

  /* goals roadmap */
  #goals{background:transparent;;}
  .goal-flow{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;justify-content:center;}
  .goal-node{padding:16px 22px;border:1px solid var(--line);border-radius:12px;font-size:13.5px;background:var(--glass);white-space:nowrap;}
  .goal-node.current{border-color:var(--blue-soft);color:#fff;box-shadow:0 0 24px rgba(47,111,255,0.2);}
  .goal-arrow{display:flex;align-items:center;padding:0 14px;color:var(--muted-2);}
  @media(max-width:768px){.goal-flow{flex-direction:column;align-items:flex-start;} .goal-arrow{padding:8px 0 8px 32px;transform:rotate(90deg);}}


  /* ==========================================
   BLOG / GALLERY PLACEHOLDER GRID
========================================== */

.placeholder-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.placeholder-card{
    padding:30px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.placeholder-card h4{
    margin-top:20px;
    font-size:15px;
}

.placeholder-card p{
    color:var(--muted);
    font-size:13px;
    margin-top:6px;
}

.soon-tag{
    align-self:flex-start;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted-2);
    border:1px solid var(--line);
    padding:5px 10px;
    border-radius:99px;
}

@media(max-width:860px){
    .placeholder-grid{
        grid-template-columns:1fr;
    }
}

  /* blog / gallery placeholders */
  /* ==========================================================
   BLOG
========================================================== */

.blog-intro{

    max-width:620px;

    margin-top:18px;

    color:var(--muted);

    font-size:15px;

    line-height:1.7;

}


/* ==========================================================
   BLOG GRID
========================================================== */

.blog-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px;

    margin-top:48px;

}


/* ==========================================================
   BLOG CARD
========================================================== */

.blog-card{

    position:relative;

    min-height:330px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border-radius:24px;

    overflow:hidden;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.blog-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(91,139,255,.13),
            transparent 45%
        );

    opacity:0;

    transition:opacity .4s ease;

    pointer-events:none;

}


.blog-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(124,167,255,.32);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        0 0 40px rgba(91,139,255,.08);

}


.blog-card:hover::before{

    opacity:1;

}


/* ==========================================================
   FEATURED
========================================================== */

.blog-featured{

    min-height:360px;

}


.blog-featured::after{

    content:"FEATURED";

    position:absolute;

    top:24px;

    right:24px;

    font-family:'IBM Plex Mono',monospace;

    font-size:9px;

    letter-spacing:2px;

    color:#7ca7ff;

    opacity:.75;

}


/* ==========================================================
   META
========================================================== */

.blog-meta{

    display:flex;

    align-items:center;

    gap:14px;

}


.blog-category{

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:2px;

    color:#7ca7ff;

}


.blog-date{

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:1px;

    color:var(--muted-2);

}


/* ==========================================================
   CONTENT
========================================================== */

.blog-content{

    position:relative;

    z-index:2;

    margin-top:auto;

}


.blog-content h3{

    font-size:26px;

    line-height:1.15;

    margin-bottom:14px;

    letter-spacing:-.5px;

}


.blog-content p{

    max-width:520px;

    color:var(--muted);

    font-size:14px;

    line-height:1.7;

}


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

.blog-footer{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:32px;

}


.blog-read-time{

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:1.5px;

    color:var(--muted-2);

}


.blog-read-more{

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 0;

    transition:
        color .25s ease,
        gap .25s ease;

}


.blog-read-more span{

    color:#7ca7ff;

    font-size:18px;

}


.blog-read-more:hover{

    color:#7ca7ff;

    gap:13px;

}


/* ==========================================================
   COMING SOON
========================================================== */

.blog-locked{

    opacity:.78;

}


.soon-tag{

    display:inline-flex;

    align-items:center;

    padding:6px 11px;

    border-radius:999px;

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

    font-family:'IBM Plex Mono',monospace;

    font-size:9px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--muted-2);

}


.blog-status{

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:1px;

    color:var(--muted-2);

}


.blog-lock{

    color:var(--muted-2);

    font-size:18px;

}


/* ==========================================================
   BLOG MODAL
========================================================== */

.blog-modal{

    position:fixed;

    inset:0;

    z-index:10000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


.blog-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.blog-modal-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(3,5,12,.48);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* ==========================================================
   BLOG ARTICLE — GLASSMORPHISM
========================================================== */

.blog-modal-card{

    position:relative;

    z-index:2;

    width:min(850px,100%);

    max-height:85vh;

    overflow-y:auto;

    padding:48px;

    /* REAL GLASS */

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:blur(32px) saturate(125%);

    -webkit-backdrop-filter:
        blur(32px) saturate(125%);

    /* GLASS EDGE */

    border:
        1px solid rgba(255,255,255,.16);

    border-top-color:
        rgba(255,255,255,.24);

    border-left-color:
        rgba(255,255,255,.18);

    border-radius:28px;

    /* DEPTH */

    box-shadow:

        0 40px 120px
        rgba(0,0,0,.55),

        0 0 80px
        rgba(91,139,255,.08),

        inset 0 1px 0
        rgba(255,255,255,.14);

    /* SUBTLE OPEN ANIMATION */

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);

}

.blog-modal-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(124,167,255,.12),
            transparent 32%
        );

    opacity:.8;

}

.blog-modal.active .blog-modal-card{

    transform:
        translateY(0) scale(1);

}


/* ==========================================================
   CLOSE
========================================================== */

.blog-modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.10);

    color:rgba(255,255,255,.75);

    font-size:24px;

    line-height:1;

    cursor:pointer;

    transition:.25s ease;

}


.blog-modal-close:hover{

    color:#fff;

    background:rgba(124,167,255,.18);

    transform:rotate(90deg);

}


/* ==========================================================
   ARTICLE
========================================================== */

.blog-modal-header{

    padding-right:50px;

    margin-bottom:40px;

}


.blog-modal-header h2{

    margin-top:18px;

    font-size:clamp(32px,5vw,52px);

    line-height:1.05;

    letter-spacing:-1.5px;

}


.blog-modal-meta{

    margin-top:18px;

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:1.5px;

    color:var(--muted-2);

}


.blog-article{

    max-width:700px;

}


.blog-article p{

    margin-bottom:22px;

    color:rgba(255,255,255,.68);

    font-size:16px;

    line-height:1.9;

}


.blog-article .article-lead{

    font-size:20px;

    line-height:1.65;

    color:rgba(255,255,255,.92);

    margin-bottom:35px;

}


.blog-article .article-ending{

    margin-top:35px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.10);

    color:#fff;

    font-size:18px;

}


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

@media(max-width:860px){

    .blog-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:600px){

    .blog-card{

        min-height:300px;

        padding:24px;

    }

    .blog-content h3{

        font-size:22px;

    }

    .blog-modal{

        padding:12px;

    }

    .blog-modal-card{

        padding:30px 22px;

        max-height:90vh;

        border-radius:22px;

    }

    .blog-modal-header h2{

        font-size:32px;

    }

    .blog-article p{

        font-size:15px;

        line-height:1.8;

    }

}

  /* contact */
  #contact{background:transparent;;}
  .contact-card{padding:56px;text-align:center;max-width:680px;margin:0 auto;}
  .contact-card h2{font-size:clamp(26px,4vw,38px);margin-bottom:16px;}
  .contact-card p{color:var(--muted);margin-bottom:34px;}
  .contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
  .contact-links a{font-size:13.5px;padding:12px 22px;border:1px solid var(--line-strong);border-radius:99px;transition:all .3s;}
  .contact-links a:hover{border-color:var(--blue-soft);transform:translateY(-2px);}

  form.contact-form{margin-top:40px;display:grid;gap:14px;text-align:left;}
  form.contact-form input,form.contact-form textarea{
    background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--text);font-family:'Inter';font-size:14px;outline:none;transition:border-color .3s;}
  form.contact-form input:focus,form.contact-form textarea:focus{border-color:var(--blue-soft);}
  form.contact-form button{margin-top:6px;}

  footer{padding:50px 0;text-align:center;border-top:1px solid var(--line);}
  footer .quote{font-family:'Space Grotesk';font-size:15px;color:var(--muted);margin-bottom:14px;}
  footer .fine{font-size:12px;color:var(--muted-2);}

  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:#222;border-radius:99px;}

  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  }

  /* ============ SNAKE GAME PROJECT CARD ============ */
  .snake-project-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(47,111,255,0.06),rgba(139,92,246,0.03));}
  .snake-project-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius);padding:1px;
    background:conic-gradient(from 0deg,rgba(47,111,255,.55),rgba(139,92,246,.55),rgba(47,111,255,.55));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    opacity:.55;pointer-events:none;animation:spin 12s linear infinite;}
  .snake-project-card::after{content:'';position:absolute;top:-40%;left:-10%;width:60%;height:80%;
    background:radial-gradient(circle,rgba(47,111,255,0.16),transparent 65%);pointer-events:none;filter:blur(30px);}
  .snake-badge{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--muted-2);letter-spacing:.06em;}
  .snake-game-wrap{margin:22px 0 6px;position:relative;z-index:1;}
  .snake-hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
  .snake-score-row{display:flex;gap:12px;}
  .snake-score{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:8px 18px;border-radius:10px;min-width:76px;}
  .snake-score .label{font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);}
  .snake-score .value{font-family:'Space Grotesk';font-size:20px;font-weight:600;background:linear-gradient(100deg,var(--blue-soft),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .snake-controls-btns{display:flex;gap:8px;flex-wrap:wrap;}
  .snake-btn{font-family:'IBM Plex Mono';font-size:12px;padding:9px 16px;border-radius:99px;border:1px solid var(--line-strong);background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;transition:all .25s var(--ease);}
  .snake-btn:hover:not(:disabled){border-color:var(--blue-soft);box-shadow:0 0 16px rgba(47,111,255,.28);transform:translateY(-2px);}
  .snake-btn:disabled{opacity:.35;cursor:not-allowed;}
  .snake-canvas-shell{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto;border-radius:16px;overflow:hidden;
    border:1px solid var(--line-strong);background:radial-gradient(circle at 50% 15%,#12151d,#06070a 72%);
    box-shadow:inset 0 0 70px rgba(47,111,255,.08), 0 20px 50px rgba(0,0,0,.4);}
  #snakeCanvas{width:100%;height:100%;display:block;touch-action:none;}
  .snake-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,7,10,.78);backdrop-filter:blur(8px);text-align:center;padding:20px;}
  .snake-overlay-inner h4{font-size:20px;margin-bottom:8px;}
  .snake-overlay-inner p{color:var(--muted);font-size:13.5px;margin-bottom:16px;}
  .snake-overlay-btn{padding:11px 24px;font-size:13px;}
  .snake-new-high{color:var(--blue-soft) !important;font-family:'IBM Plex Mono';font-size:12.5px !important;}
  .snake-hint{margin-top:12px;text-align:center;font-size:11px;color:var(--muted-2);letter-spacing:.02em;}
  @media(max-width:520px){.snake-hud{justify-content:center;text-align:center;} .snake-score-row{justify-content:center;width:100%;}}

  /* ============ AI COMPANION ROBOT ============ */
  .ai-companion{position:fixed;bottom:16px;left:0;width:56px;height:56px;z-index:60;pointer-events:none;
    will-change:transform;opacity:.92;transition:opacity .6s ease;}
  .ai-companion svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(47,111,255,.4));display:block;}
  .ai-companion .ac-pupil{transition:transform .25s var(--ease);}
  .ai-companion .ac-wave{transform-origin:80% 70%;opacity:0;}
  .ai-companion.waving .ac-wave{animation:acWave .9s ease-in-out;}
  @keyframes acWave{0%,100%{opacity:0;transform:rotate(0deg);}15%{opacity:1;}25%{transform:rotate(-24deg);}45%{transform:rotate(6deg);}65%{transform:rotate(-18deg);}85%{transform:rotate(0deg);}100%{opacity:0;}}
  .ai-companion.blink .ac-eyeL, .ai-companion.blink .ac-eyeR{transform:scaleY(.15);}
  .ac-eyeL,.ac-eyeR{transition:transform .09s ease;transform-origin:center;}
  @media(max-width:640px){.ai-companion{width:40px;height:40px;bottom:12px;}}
  @media(prefers-reduced-motion:reduce){.ai-companion{display:none;}}

/* ============================================================
   INTRODUCTION VIDEO SECTION
   Premium glassmorphism placeholder — swap the inner markup
   for a real <iframe> or <video> later (see index.html comment).
   ============================================================ */
#intro-video{padding-top:70px;}
.intro-video-card{max-width:900px;margin:0 auto;}
.intro-video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg, rgba(47,111,255,0.08), rgba(139,92,246,0.05)), var(--bg-panel-2);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.intro-video-frame::before{
  content:'';
  position:absolute;inset:0;border-radius:22px;padding:1.5px;
  background:conic-gradient(from 0deg, rgba(47,111,255,.6), rgba(139,92,246,.6), rgba(47,111,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;pointer-events:none;animation:spin 14s linear infinite;
}
/* Fills the frame automatically once a real <iframe> or <video> replaces the placeholder */
.intro-video-frame iframe,
.intro-video-frame video{width:100%;height:100%;display:block;border:0;object-fit:cover;}
.intro-video-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;
}
.intro-play-btn{
  width:78px;height:78px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 0 40px rgba(47,111,255,.45);
  transition:transform .35s var(--ease);
}
.intro-video-card:hover .intro-play-btn{transform:scale(1.08);}
.intro-play-btn svg{width:26px;height:26px;fill:#fff;margin-left:3px;}
.intro-video-label{font-family:'Space Grotesk';font-size:17px;color:var(--text);}
.intro-video-sub{font-size:13px;color:var(--muted);font-family:'IBM Plex Mono';}
@media(max-width:600px){
  .intro-play-btn{width:60px;height:60px;}
  .intro-play-btn svg{width:20px;height:20px;}
}

/* ============================================================
   CONTACT MODAL — "Available Soon" popup
   Shown when the contact form is submitted.
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.6);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
  padding:20px;
}
.modal-overlay.active{opacity:1;pointer-events:auto;}
.modal-card{
  position:relative;
  width:100%;max-width:420px;
  padding:44px 38px;
  text-align:center;
  background:rgba(20,22,28,0.6);
  border:1px solid var(--line-strong);
  border-radius:20px;
  backdrop-filter:blur(24px);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.modal-overlay.active .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-card::before{
  content:'';
  position:absolute;inset:0;border-radius:20px;padding:1px;
  background:conic-gradient(from 0deg,rgba(47,111,255,.5),rgba(139,92,246,.5),rgba(47,111,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;pointer-events:none;
}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  color:var(--muted);font-size:15px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s var(--ease);
}
.modal-close:hover{border-color:var(--blue-soft);color:#fff;transform:rotate(90deg);}
.modal-icon{font-size:34px;margin-bottom:14px;}
.modal-card h3{font-size:21px;margin-bottom:12px;}
.modal-card p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:22px;}
.modal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.modal-links a{font-size:12.5px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:99px;transition:all .3s;}
.modal-links a:hover{border-color:var(--blue-soft);}
@media(max-width:480px){.modal-card{padding:34px 24px;}}

/* ==========================================================
   GLOBAL SEQUENCE BACKGROUND
========================================================== */

#globalSequenceCanvas{
    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;

    z-index:-2;

    pointer-events:none;

    opacity:.70;

    object-fit:cover;

    filter:
        brightness(.95)
    contrast(1.05)
    saturate(1.05);

    transition:
        opacity .4s ease;

    will-change:
        transform,
        opacity;
}
/* ==========================================
   Constellation Canvas
========================================== */

.portrait-inner{
    position: relative;
    width: 100%;
    height: 100%;
}

#constellationCanvas{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}

/* ==========================================================
   ORBIT AI COMPANION
========================================================== */

.orbit{

    position:fixed;

    left:20px;

    bottom:18px;

    width:58px;

    height:58px;

    z-index:999;

    cursor:pointer;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.orbit:hover{

    transform:scale(1.12);

    filter:drop-shadow(0 0 20px rgba(91,139,255,.6));

}

.orbit svg{

    width:100%;

    height:100%;

}

.orbit .ac-pupil{

    transition:transform .25s ease;

}

.orbit .ac-wave{

    transform-origin:80% 70%;

    opacity:0;

}

.orbit.waving .ac-wave{

    animation:orbitWave .9s ease;

}

@keyframes orbitWave{

0%,100%{

opacity:0;

transform:rotate(0deg);

}

20%{

opacity:1;

}

40%{

transform:rotate(-20deg);

}

60%{

transform:rotate(8deg);

}

80%{

transform:rotate(-15deg);

}

}

.orbit.blink .ac-eyeL,

.orbit.blink .ac-eyeR{

transform:scaleY(.15);

}

.ac-eyeL,

.ac-eyeR{

transform-origin:center;

}

/* ==========================================================
   ORBIT SPEECH BUBBLE
========================================================== */

.orbit-bubble{

    position:fixed;

    left:90px;

    bottom:42px;

    max-width:260px;

    padding:14px 18px;

    border-radius:18px;

    background:rgba(20,22,28,.85);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    font-size:14px;

    line-height:1.5;

    opacity:0;

    transform:translateY(10px);

    pointer-events:none;

    transition:.35s;

    z-index:999;

}

.orbit-bubble.show{

    opacity:1;

    transform:translateY(0);

}

.orbit-bubble::before{

    content:"";

    position:absolute;

    left:-8px;

    bottom:18px;

    width:16px;

    height:16px;

    background:inherit;

    transform:rotate(45deg);

    border-left:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* ==========================================================
   ORBIT CHAT WINDOW
========================================================== */

.orbit-chat{

    position:fixed;

    left:25px;

    bottom:95px;

    width:370px;

    height:520px;

    display:flex;

    flex-direction:column;

    background:rgba(18,20,28,.92);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.4s;

    z-index:1000;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

}

.orbit-chat.open{

    opacity:1;

    visibility:visible;

    transform:none;

}

.orbit-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.orbit-title{

    display:flex;

    flex-direction:column;

    gap:3px;

    font-weight:600;

}

.orbit-title span{

    font-size:12px;

    color:#8d8d97;

}

#orbitClose{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.05);

    color:white;

}

.orbit-messages{

    flex:1;

    overflow:auto;

    padding:18px;

}

.orbit-message{

    padding:14px 16px;

    border-radius:18px;

    margin-bottom:14px;

    max-width:85%;

    font-size:14px;

    line-height:1.6;

}

.orbit-message-ai{

    background:rgba(91,139,255,.15);

}

.orbit-input{

    display:flex;

    gap:10px;

    padding:18px;

    border-top:1px solid rgba(255,255,255,.06);

}

.orbit-input input{

    flex:1;

    background:rgba(255,255,255,.04);

    border:none;

    border-radius:999px;

    padding:12px 16px;

    color:white;

}

.orbit-input button{

    width:46px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#2f6fff,#8b5cf6);

    color:white;

    cursor:pointer;

}

.orbit-quick-actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    padding:16px;

}

.orbit-quick-actions button{

    border:none;

    background:rgba(255,255,255,.05);

    color:white;

    padding:8px 12px;

    border-radius:999px;

    cursor:pointer;

    transition:.3s;

}

.orbit-quick-actions button:hover{

    background:#2f6fff;

}

/* ==========================================
   WORLD STATUS — COMPACT
========================================== */

.world-status{

    position:fixed;

    right:18px;

    bottom:18px;

    width:175px;

    z-index:999;

    user-select:none;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


/* ==========================================
   TITLE
========================================== */

.world-title{

    display:flex;

    align-items:center;

    gap:6px;

    color:rgba(255,255,255,.65);

    font-size:9px;

    letter-spacing:2.5px;

    text-transform:uppercase;

    margin-bottom:6px;

    padding-left:5px;

}


/* ==========================================
   GLASS CARD
========================================== */

.world-card{

    position:relative;

    background:rgba(12,16,28,.42);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:16px;

    padding:12px 14px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

    animation:floatCard 7s ease-in-out infinite;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* ==========================================
   HOVER
========================================== */

.world-card:hover{

    transform:translateY(-4px) scale(1.015);

    border-color:rgba(124,167,255,.28);

    box-shadow:
        0 18px 45px rgba(91,139,255,.20),
        inset 0 1px 0 rgba(255,255,255,.10);

}


/* ==========================================
   COUNTRY
========================================== */

.country{

    display:flex;

    align-items:center;

    gap:10px;

}


/* ==========================================
   FLAG
========================================== */

.flag{

    font-size:20px;

    width:26px;

    min-width:26px;

    text-align:center;

}


/* ==========================================
   INFO
========================================== */

.info{

    flex:1;

    min-width:0;

}


/* ==========================================
   LABEL
========================================== */

.label{

    font-size:7px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#7ca7ff;

    margin-bottom:2px;

}


/* ==========================================
   PLACE
========================================== */

.place{

    color:#fff;

    font-size:14px;

    font-weight:700;

    line-height:1.2;

}


/* ==========================================
   TIME
========================================== */

.time{

    margin-top:3px;

    color:#dce4ff;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    font-family:
        SFMono-Regular,
        Consolas,
        monospace;

}


/* ==========================================
   DIVIDER
========================================== */

.divider{

    height:1px;

    margin:10px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

}


/* ==========================================
   CLOSE BUTTON
========================================== */

.world-close{

    position:absolute;

    top:7px;

    right:7px;

    width:20px;

    height:20px;

    padding:0;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.07);

    color:rgba(255,255,255,.65);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    line-height:1;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}


.world-close:hover{

    background:rgba(255,255,255,.16);

    color:white;

    transform:rotate(90deg);

}


/* ==========================================
   FLOAT
========================================== */

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================
   HIDDEN STATE
========================================== */

.world-status{

    transition:
        opacity .3s ease,
        transform .3s ease;

}


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

@media(max-width:768px){

    .world-status{

        right:12px;

        bottom:12px;

        width:155px;

    }

    .world-card{

        padding:10px 12px;

        border-radius:14px;

    }

    .world-title{

        font-size:8px;

        letter-spacing:2px;

    }

    .flag{

        font-size:17px;

        width:22px;

        min-width:22px;

    }

    .place{

        font-size:12px;

    }

    .time{

        font-size:10px;

    }

    .divider{

        margin:8px 0;

    }

}

/* ==========================================================
   CINEMATIC GLASS INTRO
========================================================== */

#introLoader{

    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:999999;

    background:rgba(8,10,20,.25);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    overflow:hidden;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease,
        backdrop-filter 1.2s ease;

}

/* ===========================
   Background Glow
=========================== */

#introLoader::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(91,139,255,.18),
        transparent 70%);

    filter:blur(60px);

    animation:introGlow 7s ease-in-out infinite;

}

/* ===========================
   Floating Light
=========================== */

#introLoader::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(139,92,246,.15),
        transparent);

    filter:blur(40px);

    top:18%;

    right:18%;

    animation:floatLight 10s ease-in-out infinite;

}

/* ===========================
   Glass Card
=========================== */

.loader-content{

    position:relative;

    width:min(540px,90vw);

    padding:48px;

    border-radius:32px;

    text-align:center;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:

        0 30px 80px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.10);

}

/* ===========================
   Animated Border
=========================== */

.loader-content::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(91,139,255,.7),
            rgba(139,92,246,.4),
            rgba(91,139,255,.7)
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

/* ===========================
   Logo
=========================== */

.loader-logo{

    font-family:"Space Grotesk",sans-serif;

    font-size:72px;

    font-weight:700;

    color:#fff;

    letter-spacing:-2px;

}

.loader-logo span{

    color:#5b8bff;

}

/* ===========================
   Subtitle
=========================== */

.loader-status{

    margin-top:18px;

    color:rgba(255,255,255,.82);

    font-size:14px;

    letter-spacing:4px;

    text-transform:uppercase;

}

/* ===========================
   Quote
=========================== */

.loader-quote{

    margin-top:32px;

    color:rgba(255,255,255,.55);

    font-size:15px;

    line-height:1.7;

    font-style:italic;

}

/* ===========================
   Progress
=========================== */

.loader-progress{

    margin-top:40px;

    height:6px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    overflow:hidden;

}

.loader-progress-bar{

    width:0;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #4f7cff,
            #7d5cff,
            #5b8bff
        );

    box-shadow:

        0 0 18px rgba(91,139,255,.8);

    transition:width .45s ease;

}

/* ===========================
   Hide
=========================== */

#introLoader.hide{

    opacity:0;

    visibility:hidden;

    backdrop-filter:blur(0);

}

/* ===========================
   Animations
=========================== */

@keyframes introGlow{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes floatLight{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

    .loader-content{

        width:90vw;

        padding:32px;

    }

    .loader-logo{

        font-size:54px;

    }

    .loader-status{

        font-size:12px;

        letter-spacing:2px;

    }

}
.blog-modal-card::-webkit-scrollbar{

    width:6px;

}

.blog-modal-card::-webkit-scrollbar-track{

    background:transparent;

}

.blog-modal-card::-webkit-scrollbar-thumb{

    background:
        rgba(124,167,255,.28);

    border-radius:999px;

}

.blog-modal-card::-webkit-scrollbar-thumb:hover{

    background:
        rgba(124,167,255,.45);

}
/* ==========================================================
   CINEMATIC FILM CARD
========================================================== */

.film-card{
    padding:22px;
    overflow:hidden;
}

.film-video-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:16px;
    background:#050507;
    border:1px solid var(--line);
}

.film-video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#050507;
}

.film-content{
    padding:22px 2px 2px;
}

.film-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:1.4px;
    color:var(--blue-soft);
    text-transform:uppercase;
}

.film-meta .lang-dot{
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    background:var(--purple);
    margin-right:5px;
}

.film-content h3{
    font-size:26px;
    margin:14px 0 10px;
}

.film-content p{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    max-width:700px;
}

.film-description-btn{
    font-family:'Inter',sans-serif;
    font-size:13px;
    color:#fff;

    padding:11px 20px;

    border:1px solid var(--line-strong);
    border-radius:99px;

    background:transparent;

    cursor:pointer;

    transition:
        border-color .3s ease,
        transform .3s var(--ease),
        box-shadow .3s ease;
}

.film-description-btn span{
    color:var(--blue-soft);
    margin-left:6px;
}

.film-description-btn:hover{
    border-color:var(--blue-soft);
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(47,111,255,.16);
}


/* ==========================================================
   CINEMATIC FILM MODAL
========================================================== */

.film-modal{
    position:fixed;
    inset:0;

    z-index:10001;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.film-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.film-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(3,5,12,.55);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.film-modal-card{
    position:relative;
    z-index:2;

    width:min(900px,100%);
    max-height:90vh;

    overflow-y:auto;

    padding:46px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:blur(32px) saturate(125%);
    -webkit-backdrop-filter:blur(32px) saturate(125%);

    border:1px solid rgba(255,255,255,.16);
    border-top-color:rgba(255,255,255,.24);

    border-radius:28px;

    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 0 80px rgba(91,139,255,.08),
        inset 0 1px 0 rgba(255,255,255,.14);

    transform:translateY(25px) scale(.97);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}

.film-modal.active .film-modal-card{
    transform:translateY(0) scale(1);
}

.film-modal-close{
    position:absolute;

    top:18px;
    right:18px;

    width:40px;
    height:40px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.07);

    color:rgba(255,255,255,.75);

    font-size:24px;
    line-height:1;

    cursor:pointer;

    z-index:5;

    transition:.25s ease;
}

.film-modal-close:hover{
    color:#fff;
    background:rgba(124,167,255,.18);
    transform:rotate(90deg);
}

.film-modal-header{
    padding-right:50px;
    margin-bottom:28px;
}

.film-modal-header h2{
    margin-top:16px;

    font-size:clamp(32px,5vw,52px);

    line-height:1.05;

    letter-spacing:-1.5px;
}

.film-modal-meta{
    margin-top:16px;

    font-family:'IBM Plex Mono',monospace;

    font-size:10px;

    letter-spacing:1.5px;

    color:var(--muted-2);
}

.film-modal-video{
    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:18px;

    background:#050507;

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

    margin-bottom:34px;
}

.film-modal-video video{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#050507;
}

.film-article{
    max-width:760px;
}

.film-article p{
    margin-bottom:22px;

    color:rgba(255,255,255,.68);

    font-size:16px;

    line-height:1.9;
}

.film-article .film-lead{
    font-size:20px;

    line-height:1.65;

    color:rgba(255,255,255,.92);

    margin-bottom:35px;
}

.film-article .film-ending{
    margin-top:35px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.10);

    color:#fff;

    font-size:18px;
}


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

@media(max-width:600px){

    .film-card{
        padding:16px;
    }

    .film-content{
        padding-top:18px;
    }

    .film-content h3{
        font-size:23px;
    }

    .film-modal{
        padding:12px;
    }

    .film-modal-card{
        padding:30px 22px;

        max-height:92vh;

        border-radius:22px;
    }

    .film-modal-header h2{
        font-size:32px;
    }

    .film-article p{
        font-size:15px;
        line-height:1.8;
    }

}