/* =========================
       thinkcreative.labs – Design Tokens
    ========================= */
    :root{
      --bg0:#05060f;
      --bg1:#07081a;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.04);
      --line: rgba(255,255,255,.10);

      --text:#eaf0ff;
      --muted:#b7c0e6;

      --blue:#4aa3ff;
      --violet:#9b5cff;
      --mint:#4dffcf;

      --glow-blue: rgba(74,163,255,.35);
      --glow-violet: rgba(155,92,255,.35);
      --glow-mint: rgba(77,255,207,.25);

      --radius: 22px;
      --shadow: 0 22px 70px rgba(0,0,0,.6);
      --shadow-soft: 0 12px 30px rgba(0,0,0,.35);

      --max: 1180px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    }

    /* =========================
       Base
    ========================= */
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--text);
      background:
        radial-gradient(1100px 650px at 70% 18%, rgba(155,92,255,.18), transparent 58%),
        radial-gradient(900px 540px at 35% 55%, rgba(74,163,255,.16), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #04040c);
      overflow-x:hidden;
      background-image: url("../images/hg.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }

    .container{
      width:min(var(--max), calc(100% - 48px));
      margin-inline:auto;
    }

    /* =========================
       Background grid + noise
    ========================= */
    .bg{
      position:relative;
      isolation:isolate;
    }

    .bg::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-3;
      background:
        /* subtle grid */
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 48px 48px;
      opacity:.10;
      mask-image: radial-gradient(900px 700px at 50% 20%, black 35%, transparent 70%);
      pointer-events:none;
    }

    .bg::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      background:
        radial-gradient(900px 380px at 50% 105%, rgba(74,163,255,.14), transparent 65%),
        radial-gradient(900px 380px at 50% 108%, rgba(155,92,255,.12), transparent 65%);
      pointer-events:none;
    }

    /* =========================
       UI Atoms
    ========================= */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.6rem;
      padding:.85rem 1.05rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
      color:var(--text);
      font-weight:700;
      letter-spacing:.2px;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
    .btn:active{ transform: translateY(0); }

    .btn.primary{
      border:0;
      background: linear-gradient(135deg, rgba(74,163,255,.95), rgba(155,92,255,.95));
      box-shadow: 0 18px 55px rgba(74,163,255,.16), 0 18px 55px rgba(155,92,255,.16);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.38rem .70rem;
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(10px);
      color: var(--muted);
      font-weight:800;
      font-size:.9rem;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 0 16px var(--glow-blue), 0 0 16px var(--glow-violet);
    }

    .kbd{
      font-family: var(--mono);
      font-weight:800;
      font-size:.9rem;
      padding:.25rem .45rem;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: rgba(234,240,255,.92);
    }

    /* =========================
       Header
    ========================= */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(16px);
      background: rgba(5,6,15,.62);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 0;
      gap: 18px;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:900;
      letter-spacing:.2px;
      font-size:1.1rem;
    }
    .mark{
      width:60px; height:60px; border-radius:50px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 40%),
        linear-gradient(135deg, rgba(74,163,255,1), rgba(155,92,255,1));
      box-shadow: 0 0 22px var(--glow-blue), 0 0 22px var(--glow-violet);
      background-image: url("../images/bird.png");
  background-position: top center;
  background-size: cover;



    }
    .brand .name{
      display:flex; flex-direction:column; gap:2px;
      line-height:1.05;
    }
    .brand .name b{ font-size:1.05rem; }
    .brand .name span{
      font-family: var(--mono);
      font-size:.78rem;
      color: rgba(183,192,230,.9);
      letter-spacing:.08em;
    }

    nav ul{
      list-style:none; display:flex; gap:16px; margin:0; padding:0;
      color: var(--muted);
      font-weight:800;
      font-family: var(--mono);
      font-size:.92rem;
    }
    nav a{ padding:10px 10px; border-radius:999px; }
    nav a:hover{ background: rgba(255,255,255,.06); color:var(--text); }

    .nav-cta{ display:flex; gap:10px; align-items:center; }

    /* mobile */
    .burger{ display:none; }
    @media (max-width: 860px){
      nav ul{ display:none; }
      .burger{ display:inline-flex; }
    }

    /* =========================
       Mobile drawer
    ========================= */
    .mobile-menu{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(6px);
      display:none;
      z-index: 999;
    }
    .mobile-menu.open{ display:block; }

    .mobile-menu__inner{
      width: min(420px, 92vw);
      margin: 12px;
      padding: 14px;
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(5,6,15,.78);
      box-shadow: var(--shadow);
    }
    .mobile-menu__head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      margin-bottom: 10px;
    }
    .m-link{
      display:flex;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight:900;
      margin: 10px 0;
      font-family: var(--mono);
    }
    .m-link:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.14);
    }
    .mobile-menu__cta{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }

    /* =========================
       Hero
    ========================= */
    .hero{ padding: 64px 0 26px; }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      align-items:stretch;
    }

    .hero h1{
      margin: 14px 0 10px;
      line-height:1.05;
      font-size: clamp(2.1rem, 3vw, 3.2rem);
      letter-spacing: -0.02em;
    }
    .hero p{
      margin:0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height:1.55;
      max-width: 64ch;
    }

    .hero-actions{
      display:flex;
      gap:12px;
      margin-top: 20px;
      flex-wrap:wrap;
    }

    .hero-meta{
      margin-top: 16px;
      display:flex; gap:10px; flex-wrap:wrap;
      color: var(--muted);
      font-weight:800;
      font-family: var(--mono);
      font-size:.92rem;
    }

    .terminal{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 320px;
      position:relative;
    }
    .term-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
    }
    .term-dots{
      display:flex; gap:8px; align-items:center;
    }
    .term-dots span{
      width:10px; height:10px; border-radius:50%;
      background: rgba(255,255,255,.20);
    }
    .term-title{
      font-family: var(--mono);
      font-weight:900;
      color: rgba(234,240,255,.88);
      letter-spacing:.06em;
      font-size:.85rem;
    }

    .term-body{
      padding: 14px;
      font-family: var(--mono);
      color: rgba(234,240,255,.92);
      line-height:1.55;
      font-size:.92rem;
    }
    .term-body .dim{ color: rgba(183,192,230,.75); }
    .term-body .ok{ color: rgba(77,255,207,.9); }
    .term-body .hi{ color: rgba(74,163,255,.92); }
    .term-body .warn{ color: rgba(255,180,90,.92); }

    /* subtle animated scanline */
    .terminal::after{
      content:"";
      position:absolute;
      inset:-30% -10%;
      background: linear-gradient(180deg, transparent, rgba(74,163,255,.06), transparent);
      transform: translateY(-40%);
      animation: scan 6s ease-in-out infinite;
      pointer-events:none;
      mix-blend-mode: screen;
    }
    @keyframes scan{
      0%,100%{ transform: translateY(-40%); }
      50%{ transform: translateY(60%); }
    }

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

    /* =========================
       Sections / Cards
    ========================= */
    section{ padding: 26px 0; }
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:18px;
      margin-bottom: 14px;
    }
    .section-title h2{
      margin:0;
      font-size: clamp(1.35rem, 2vw, 1.9rem);
      letter-spacing:-0.01em;
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      max-width: 62ch;
      line-height:1.5;
    }

    .panel{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow-soft);
      padding: 16px;
      position:relative;
      overflow:hidden;
    }
    .panel::after{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(680px 240px at 20% 0%, rgba(74,163,255,.12), transparent 55%),
        radial-gradient(680px 240px at 80% 0%, rgba(155,92,255,.12), transparent 55%);
      pointer-events:none;
    }
    .panel > *{ position:relative; z-index:1; }

    /* =========================
       Filters
    ========================= */
    .filters{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .chip-row{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.55rem .85rem;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(234,240,255,.9);
      font-weight:900;
      font-family: var(--mono);
      font-size:.9rem;
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease, background .2s ease, border-color .2s ease;
    }
    .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
    .chip.active{
      border-color: rgba(74,163,255,.35);
      box-shadow: 0 0 0 3px rgba(74,163,255,.10);
      background: rgba(74,163,255,.08);
    }

    .search{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 260px;
    }
    .search input{
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(5,6,20,.55);
      color: var(--text);
      padding: 12px 14px;
      outline: none;
      font-weight:800;
      font-family: var(--mono);
    }
    .search input:focus{
      border-color: rgba(74,163,255,.45);
      box-shadow: 0 0 0 3px rgba(74,163,255,.10);
    }

    /* =========================
       Project Grid
    ========================= */
    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 14px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px){
      .grid{ grid-template-columns: 1fr; }
    }

    .proj{
      padding:0;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 320px;
    }
    .thumb{
      aspect-ratio: 16/9;
      background:
        radial-gradient(520px 220px at 20% 30%, rgba(74,163,255,.22), transparent 60%),
        radial-gradient(520px 220px at 80% 30%, rgba(155,92,255,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border-bottom: 1px solid rgba(255,255,255,.08);
      position:relative;
    }

    .thumb .badge{
      position:absolute;
      top:12px; left:12px;
      display:inline-flex; align-items:center; gap:8px;
      padding:.35rem .6rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
      font-family: var(--mono);
      font-weight:900;
      font-size:.82rem;
      letter-spacing:.04em;
    }
    .b-live{ box-shadow: 0 0 0 3px rgba(77,255,207,.10); border-color: rgba(77,255,207,.25); }
    .b-beta{ box-shadow: 0 0 0 3px rgba(74,163,255,.10); border-color: rgba(74,163,255,.25); }
    .b-concept{ box-shadow: 0 0 0 3px rgba(155,92,255,.10); border-color: rgba(155,92,255,.25); }

    .badge .s{
      width:10px; height:10px; border-radius:50%;
      background: rgba(255,255,255,.20);
    }
    .b-live .s{ background: var(--mint); box-shadow: 0 0 16px var(--glow-mint); }
    .b-beta .s{ background: var(--blue); box-shadow: 0 0 16px var(--glow-blue); }
    .b-concept .s{ background: var(--violet); box-shadow: 0 0 16px var(--glow-violet); }

    .content{
      padding: 16px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      flex:1;
    }
    .meta{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color: rgba(183,192,230,.85);
      font-family: var(--mono);
      font-weight:800;
      font-size:.85rem;
    }
    .title{
      margin:0;
      font-size: 1.15rem;
      letter-spacing:-0.01em;
    }
    .desc{
      margin:0;
      color: var(--muted);
      line-height:1.55;
    }

    .tags{
      display:flex; gap:8px; flex-wrap:wrap;
      margin-top: 2px;
    }
    .tag{
      font-family: var(--mono);
      font-weight:900;
      font-size:.78rem;
      padding:.28rem .48rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(234,240,255,.9);
    }
    .tag.blue{ border-color: rgba(74,163,255,.22); background: rgba(74,163,255,.07); }
    .tag.violet{ border-color: rgba(155,92,255,.22); background: rgba(155,92,255,.07); }
    .tag.mint{ border-color: rgba(77,255,207,.22); background: rgba(77,255,207,.07); }

    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:auto;
      padding-top: 6px;
    }

    /* =========================
       Build in public section
    ========================= */
    .bip{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items:stretch;
    }
    @media (max-width: 900px){
      .bip{ grid-template-columns: 1fr; }
    }

    .bip ul{
      margin: 12px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
      color: var(--muted);
      font-weight:800;
      font-family: var(--mono);
    }
    .bip li{
      display:flex; gap:10px; align-items:flex-start;
    }
    .tick{
      width:18px; height:18px; border-radius:6px;
      margin-top:2px;
      background: linear-gradient(135deg, rgba(74,163,255,1), rgba(155,92,255,1));
      box-shadow: 0 0 16px rgba(74,163,255,.20), 0 0 16px rgba(155,92,255,.20);
      flex:0 0 auto;
    }

    /* =========================
       Footer
    ========================= */
    footer{
      padding: 26px 0 38px;
      border-top: 1px solid rgba(255,255,255,.07);
      color: rgba(183,192,230,.85);
      font-weight:800;
      font-family: var(--mono);
    }
    .foot{
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
    }
    .tiny{ font-size:.92rem; opacity:.9; }

    /* reduce motion */
    @media (prefers-reduced-motion: reduce){
      .terminal::after{ animation:none; }
    }