*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

  :root{
    --bg:#0e0e12;
    --bg-2:#13131a;
    --bg-3:#18181f;
    --surface:#1d1d26;
    --line:rgba(255,255,255,0.1);
    --line-2:rgba(255,255,255,0.18);
    --cyan:#00E5FF;
    --cyan-2:#06B6D4;
    --cyan-dim:rgba(0,229,255,0.18);
    --cyan-glow:rgba(0,229,255,0.4);
    --text:#EAEAEC;
    --text-2:#a0a0aa;
    --text-3:#6a6a75;
    --serif:'IBM Plex Sans',sans-serif;
    --sans:'IBM Plex Sans',sans-serif;
    --mono:'IBM Plex Mono',monospace;
  }


  /* ========== LIGHT MODE ========== */
  body.light{
    --bg:#F4F4F6;
    --bg-2:#EAEAED;
    --bg-3:#E0E0E4;
    --surface:#D8D8DC;
    --line:rgba(0,0,0,0.09);
    --line-2:rgba(0,0,0,0.15);
    --cyan:#0099BB;
    --cyan-2:#007A99;
    --cyan-dim:rgba(0,153,187,0.1);
    --cyan-glow:rgba(0,153,187,0.3);
    --text:#111114;
    --text-2:#4A4A55;
    --text-3:#8A8A95;
  }
  body.light .grain{opacity:0.15}
  body.light .scanlines{opacity:0.08}
  body.light .glow-bg{
    background:
      radial-gradient(ellipse 800px 600px at 80% 10%,rgba(0,153,187,0.1),transparent 50%),
      radial-gradient(ellipse 1000px 800px at 10% 90%,rgba(0,122,153,0.08),transparent 50%);
  }
  body.light .cursor{background:var(--cyan)}
  body.light .cursor-trail{border-color:rgba(0,153,187,0.4)}
  body.light .intro{background:#F4F4F6}
  body.light nav{background:rgba(244,244,246,0.85)}
  body.light .work-card{background:var(--bg-2)}
  body.light .work-overlay{background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.2) 60%,transparent 100%)}
  body.light .hero-grid{
    background-image:radial-gradient(circle, rgba(0,153,187,0.55) 1px, transparent 1px);
  }
  body.light .btn-primary{color:#fff}
  body.light .btn-primary::before{background:rgba(0,0,0,0.15)}

  html{scroll-behavior:smooth}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:19px;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ========== ATMOSPHERE ========== */
  .grain{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0.5;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }

  .scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:repeating-linear-gradient(0deg,rgba(0,229,255,0.015) 0,rgba(0,229,255,0.015) 1px,transparent 1px,transparent 4px);
    opacity:0.3;
  }

  .glow-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(ellipse 800px 600px at 80% 10%,rgba(0,229,255,0.18),transparent 50%),
      radial-gradient(ellipse 1000px 800px at 10% 90%,rgba(6,182,212,0.14),transparent 50%);
  }


  /* ========== INTRO ========== */
  .intro{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transition:transform 1s cubic-bezier(0.77,0,0.175,1),opacity 0.5s 0.5s;
  }
  .intro.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
  .intro-counter{
    font-family:var(--mono);
    font-size:8rem;
    font-weight:300;
    color:var(--text);
    letter-spacing:-0.04em;
    line-height:1;
    position:relative;
  }
  .intro-counter::after{
    content:'%';
    font-size:2rem;
    position:absolute;
    top:0;
    margin-left:0.5rem;
    color:var(--cyan);
  }
  .intro-bar{
    margin-top:2rem;
    width:300px;
    height:1px;
    background:var(--line-2);
    position:relative;
    overflow:hidden;
  }
  .intro-bar::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--cyan);
    transform:translateX(-100%);
    animation:loadbar 2.5s cubic-bezier(0.77,0,0.175,1) forwards;
    box-shadow:0 0 20px var(--cyan-glow);
  }
  @keyframes loadbar{to{transform:translateX(0)}}

  .intro-label{
    margin-top:1.5rem;
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.3em;
    color:var(--text-3);
    text-transform:uppercase;
  }

  /* ========== NAV ========== */
  nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    padding:0 2.5rem;
    background:rgba(5,5,7,0.7);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid var(--line);
    transition:all 0.3s ease;
  }
  .nav-inner{
    max-width:1300px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 0;
    transition:padding 0.3s;
  }
  .nav-brand{
    font-family:var(--sans);
    font-weight:800;
    font-size:1.6rem;
    height:40px;
    letter-spacing:0.1em;
    text-decoration:none;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:0.5rem;
    position:relative;
  }
  .nav-brand-dot{
    width:6px;height:6px;
    background:var(--cyan);
    border-radius:50%;
    box-shadow:0 0 8px var(--cyan-glow);
    animation:pulse-dot 2s ease infinite;
  }
  @keyframes pulse-dot{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.5;transform:scale(1.4)}
  }

  .nav-links{
    display:flex;
    gap:2rem;
    list-style:none;
  }
  .nav-links a{
    font-family:var(--sans);
    font-weight:500;
    font-size:16px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--text-2);
    text-decoration:none;
    position:relative;
    padding:0.4rem 0;
    transition:color 0.3s;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:100%;
    height:1px;
    background:var(--cyan);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-links a:hover{color:var(--text)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

  .theme-toggle{
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid var(--line-2);
    background:var(--bg-2);
    display:flex;
    align-items:center;
    justify-content:center;

    transition:background 0.3s,border-color 0.3s,transform 0.3s;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    color:var(--text);
  }
  .theme-toggle:hover{
    border-color:var(--cyan);
    background:var(--cyan-dim);
    transform:rotate(20deg);
  }
  .theme-toggle svg{
    width:18px;height:18px;
    transition:opacity 0.3s,transform 0.3s;
    position:absolute;
    stroke:var(--text);
  }
  .theme-toggle .icon-moon{opacity:1;transform:scale(1)}
  .theme-toggle .icon-sun{opacity:0;transform:scale(0.5)}
  body.light .theme-toggle .icon-moon{opacity:0;transform:scale(0.5)}
  body.light .theme-toggle .icon-sun{opacity:1;transform:scale(1)}

  .menu-btn{
    display:none;
    background:none;
    border:none;
    width:30px;height:24px;
    flex-direction:column;
    justify-content:space-between;
  }
  .menu-btn span{
    width:100%;
    height:1.5px;
    background:var(--text);
    transition:0.3s;
  }

  .nav-actions{
    display:flex;
    align-items:center;
    gap:24px;
  }

  .ai-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.1em;
    color:var(--cyan);
    margin-top:1rem;
    padding:0.4rem 1rem;
    border:1px solid rgba(0,229,255,0.35);
    border-radius:100px;
    background:rgba(0,229,255,0.08);
    width:fit-content;
  }
  .ai-badge-dot{
    width:6px;height:6px;
    background:var(--cyan);
    border-radius:50%;
    flex-shrink:0;
    box-shadow:0 0 6px var(--cyan-glow);
    animation:pulse-dot 2s ease infinite;
  }

  /* ========== HERO ========== */
  .hero{
    min-height:100vh;
    position:relative;
    padding:0 2.5rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    z-index:3;
  }

  .hero-grid{
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(0,229,255,0.35) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 80%);
    pointer-events:none;
  }

  .hero-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:3rem;
    font-family:var(--mono);
    font-size:0.65rem;
    letter-spacing:0.2em;
    color:var(--text-3);
    text-transform:uppercase;
    flex-wrap:wrap;
    gap:1rem;
  }
  .hero-meta-cyan{color:var(--cyan)}
  .hero-meta-line{
    flex:1;
    height:1px;
    background:linear-gradient(to right,var(--line-2),transparent);
    min-width:60px;
  }

  .hero-h1{
    font-family:var(--serif);
    font-size:clamp(3rem,11vw,12rem);
    font-weight:400;
    line-height:0.95;
    letter-spacing:-0.04em;
    color:var(--text);
    position:relative;
  }
  .hero-h1 .word{
    display:inline-block;
    overflow:hidden;
    vertical-align:baseline;
    padding-bottom:0.2em;
    margin-bottom:-0.2em;
  }
  .hero-h1 .word > span{
    display:inline-block;
    transform:translateY(110%);
    animation:reveal-up 1.2s cubic-bezier(0.77,0,0.175,1) forwards;
    padding-bottom:0.05em;
  }
  @keyframes reveal-up{to{transform:translateY(0)}}
  .hero-h1 em{
    font-style:normal;
    color:var(--cyan);
    text-shadow:0 0 40px var(--cyan-glow);
    position:relative;
  }
  .hero-h1 em::after{
    content:'';
    position:absolute;
    left:0;bottom:0.1em;
    width:100%;
    height:1px;
    background:var(--cyan);
    transform:scaleX(0);
    transform-origin:left;
    animation:underline-grow 1.5s 1.5s cubic-bezier(0.77,0,0.175,1) forwards;
  }
  @keyframes underline-grow{to{transform:scaleX(1)}}

  .hero-bottom{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:4rem;
    margin-top:4rem;
    align-items:end;
  }

  .hero-tag-line{
    font-size:24px;
    color:var(--text-2);
    line-height:1.7;
    max-width:580px;
    opacity:0;
    animation:fade-in 1s 1.8s forwards;
  }
  .hero-tag-line strong{color:var(--text);font-weight:500}

  @keyframes fade-in{to{opacity:1}}

  .hero-cta-row{
    display:flex;
    flex-direction:column;
    gap:1rem;
    opacity:0;
    animation:fade-in 1s 2s forwards;
    width:100%;
    max-width:320px;
    margin-left:auto;
  }

  .btn{
    font-family:var(--sans);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    padding:1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    position:relative;
    overflow:hidden;
    transition:all 0.3s;
    border:none;
    border-radius:100px;
    width:100%;
  }
  .btn-primary{
    background:var(--cyan);
    color:var(--bg);
  }
  .btn-primary::before{
    content:'';
    position:absolute;
    inset:0;
    background:#fff;
    transform:translateX(-101%);
    transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-primary span{position:relative;z-index:1}
  .btn-primary:hover::before{transform:translateX(0)}
  .btn-primary:hover{box-shadow:0 0 40px var(--cyan-glow)}

  .btn-ghost{
    color:var(--text);
    border:1px solid var(--line-2);
    background:transparent;
  }
  .btn-ghost::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--cyan);
    transform:translateX(-101%);
    transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-ghost span{position:relative;z-index:1;transition:color 0.3s}
  .btn-ghost:hover::before{transform:translateX(0)}
  .btn-ghost:hover span{color:var(--bg)}

  .hero-inner{
    max-width:1300px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    padding:8rem 0 4rem;
  }
  .marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:2rem 0;
    overflow:hidden;
    position:relative;
    z-index:3;
    background:var(--bg-2);
    border-radius:0;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .marquee-track{
    display:flex;
    gap:5.2rem;
    align-items:center;
    width:max-content;
    will-change:transform;
  }
  .marquee-item{
    display:flex;
    align-items:center;
    flex-shrink:0;
    opacity:0.55;
    transition:opacity 0.3s;
    mix-blend-mode:difference;
  }
  .marquee-item:hover{opacity:0.9}
  .marquee-item svg{display:block}

  body.light .marquee-item{
    mix-blend-mode:normal;
    filter:invert(1);
    opacity:0.4;
  }
  body.light .marquee-item:hover{opacity:0.7}

  /* ========== ABOUT / STATS ========== */
  .about{
    padding:8rem 2.5rem;
    position:relative;
    z-index:3;
  }
  .about-inner{
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:5rem;
    align-items:start;
  }

  .section-tag{
    font-family:var(--mono);
    font-size:14px;
    letter-spacing:0.15em;
    color:var(--cyan);
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-bottom:2rem;
  }
  .section-tag::before{
    content:'';
    display:inline-block;
    width:30px;height:1px;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
  }

  .section-h{
    font-family:var(--serif);
    font-size:clamp(2.5rem,5vw,4.5rem);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-0.02em;
    color:var(--text);
  }
  .section-h em{font-style:normal;color:var(--cyan)}

  .about-body p{
    font-size:20px;
    color:var(--text-2);
    line-height:1.7;
    margin-bottom:1.5rem;
  }
  .about-body strong{color:var(--text);font-weight:500}

  .stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    margin-top:3rem;
  }
  .stat{
    padding:2rem 1.5rem;
    border:1px solid var(--line);
    border-radius:24px;
    position:relative;
    transition:background 0.3s;
  }
  .stat:hover{background:var(--cyan-dim)}
  .stat-num{
    font-family:var(--serif);
    font-size:80px;
    font-weight:400;
    line-height:1;
    color:var(--text);
    margin-bottom:0.5rem;
    display:flex;
    align-items:flex-start;
    gap:0.1em;
  }
  .stat-num em{font-style:normal;color:var(--cyan);font-size:0.5em;line-height:1.5}
  .stat-label{
    font-family:var(--mono);
    font-size:15px;
    letter-spacing:0.15em;
    color:var(--text-3);
    text-transform:uppercase;
  }

  /* ========== SERVICES ========== */
  .services{
    padding:8rem 2.5rem;
    background:var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:3;
    overflow:hidden;
  }
  .services::before{
    content:'';
    position:absolute;
    top:-200px;right:-200px;
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(0,229,255,0.2),transparent 70%);
    pointer-events:none;
  }

  .services-inner{
    max-width:1300px;
    margin:0 auto;
    position:relative;
    z-index:1;
  }

  .services-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:5rem;
    flex-wrap:wrap;
    gap:2rem;
  }
  .services-head p{
    max-width:400px;
    color:var(--text-2);
    line-height:1.7;
    font-size:24px;
  }

  .services-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
  .service-row{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:2.5rem;
    border:1px solid var(--line);
    border-radius:24px;
    align-items:flex-start;
    position:relative;
    transition:background 0.4s,border-color 0.3s;
    cursor:default;
    overflow:hidden;
  }
  .service-row::before{
    content:'';
    position:absolute;
    left:0;top:0;
    width:0;height:100%;
    background:linear-gradient(to right,var(--cyan-dim),transparent);
    transition:width 0.5s cubic-bezier(0.65,0,0.35,1);
    pointer-events:none;
  }
  .service-row:hover{border-color:rgba(0,229,255,0.3)}
  .service-row:hover::before{width:100%}
  .service-row:hover .service-arrow{transform:translateX(8px);color:var(--cyan)}
  .service-row:hover .service-h{color:var(--cyan)}

  .service-num{
    font-family:var(--mono);
    font-size:15px;
    letter-spacing:0.15em;
    color:var(--text-3);
    margin-bottom:1.5rem;
  }
  .service-h{
    font-family:var(--serif);
    font-size:2.5rem;
    font-weight:400;
    color:var(--text);
    transition:color 0.3s;
    line-height:1.1;
    margin-bottom:1rem;
  }
  .service-desc{
    font-size:19px;
    color:var(--text-2);
    line-height:1.6;
    flex:1;
  }
  .service-desc p{
    font-size:19px;
    line-height:1.6;
    margin:0 0 1em 0;
  }
  .service-desc p:last-child{margin-bottom:0}
  .service-desc strong{color:var(--text);font-weight:600}
  .service-tags-mini{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    margin-top:1rem;
  }
  .service-tags-mini span{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.1em;
    color:var(--text-2);
    text-transform:uppercase;
    padding:0.3rem 0.7rem;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:100px;
  }
  body.light .service-tags-mini span{
    border:1px solid rgba(0,0,0,0.2);
    color:var(--text-2);
  }
  .service-arrow{display:none}

  .service-extras-list{
    list-style:none;
    margin:1.25rem 0;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .service-extras-list li{
    font-size:17px;
    color:var(--text-2);
    line-height:1.5;
    padding-left:1.2rem;
    position:relative;
  }
  .service-extras-list li::before{
    content:'—';
    position:absolute;
    left:0;
    color:var(--cyan);
    font-size:0.85em;
    line-height:1.6;
  }

  /* ========== WORK ========== */
  .work{
    padding:8rem 2.5rem;
    position:relative;
    z-index:3;
  }
  .work-inner{
    max-width:1300px;
    margin:0 auto;
  }
  .work-head{
    margin-bottom:5rem;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:2rem;
  }
  .work-head .btn{width:auto;padding:0.75rem 2rem}

  .work-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:1.5rem;
    width:100%;
  }

  .work-card{
    position:relative;
    overflow:hidden;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:24px;
    aspect-ratio:4/3;
    transition:transform 0.5s cubic-bezier(0.65,0,0.35,1),border-color 0.3s;
    cursor:default;
    min-width:0;
    overflow:hidden;
  }
  .work-card:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
  }
  .work-card:hover .work-info{transform:translateY(0)}
  .work-card:hover .work-title-big{color:var(--cyan)}

  .work-card.large{
    grid-column:span 7;
    aspect-ratio:auto;
    min-height:540px;
  }
  .work-card.medium{
    grid-column:span 5;
    aspect-ratio:auto;
    min-height:540px;
  }
  .work-card.small{grid-column:span 4}

  /* ========== IMAGE MODAL ========== */
  .img-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
    cursor:pointer;
  }
  .img-modal.open{
    opacity:1;
    pointer-events:auto;
  }
  .img-modal img{
    max-width:1400px;
    width:100%;
    max-height:100%;
    object-fit:contain;
    box-shadow:0 20px 80px rgba(0,0,0,0.5);
    border-radius:32px;
    transform:scale(0.96);
    transition:transform 0.3s ease;
    display:block;
  }
  .img-modal img.portrait{
    max-width:none;
    width:auto;
    max-height:min(1000px, 100%);
  }
  .img-modal.open img{transform:scale(1)}

  .img-modal-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:1400px;
    width:100%;
  }
  .img-modal-wrap:hover .img-modal-nav{opacity:1;transform:translateY(-50%) scale(1)}

  .img-modal-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%) scale(0.85);
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    transition:opacity 0.25s ease, transform 0.25s ease, background 0.2s;
    z-index:2;
    flex-shrink:0;
  }
  .img-modal-nav:hover{background:rgba(0,229,255,0.3);border-color:rgba(0,229,255,0.7)}
  .img-modal-nav.prev{left:32px}
  .img-modal-nav.next{right:32px}
  .img-modal-nav svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .img-modal-nav.hidden{visibility:hidden}
  .img-modal-close{
    position:absolute;
    top:1.5rem;right:1.5rem;
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s, transform 0.2s;
  }
  .img-modal-close:hover{
    background:rgba(255,255,255,0.2);
    transform:rotate(90deg);
  }
  body.light .img-modal{background:rgba(20,20,20,0.95)}

  .work-card{cursor:default}
  .work-carousel{
    position:absolute;
    inset:0;
    background:var(--bg-2);
    overflow:hidden;
  }
  .work-carousel-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-color:var(--bg-2);
    opacity:1;
    z-index:1;
    transform:scale(1);
    transition:opacity 1500ms ease-in-out, transform 700ms cubic-bezier(0.65,0,0.35,1);
  }
  .work-card:hover .work-carousel-slide{
    transform:scale(1.02);
  }

  /* Carousel dots */
  .carousel-dots{
    position:absolute;
    bottom:1rem;
    right:1rem;
    display:flex;
    gap:12px;
    z-index:7;
    padding:8px 12px;
    border-radius:100px;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    pointer-events:none;
  }
  .carousel-dot{
    position:relative;
    width:7px;height:7px;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    transition:background 0.3s, transform 0.2s;
    cursor:pointer;
    flex-shrink:0;
    pointer-events:auto;
  }
  /* Invisible 4px touch area around each dot for easier mobile tapping */
  .carousel-dot::before{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
  }
  .carousel-dot:hover{background:rgba(255,255,255,0.7);transform:scale(1.3)}
  .carousel-dot.active{background:#fff}

  .work-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.15) 100%);
    z-index:5;
  }

  .work-info{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:2rem;
    transform:translateY(10px);
    transition:transform 0.5s cubic-bezier(0.65,0,0.35,1);
    z-index:6;
  }
  .work-card.large .work-info{padding:3rem}

  .work-cat{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.2em;
    color:var(--cyan);
    text-transform:uppercase;
    margin-bottom:0.75rem;
    display:inline-block;
    padding:0.3rem 0.9rem;
    border:1px solid rgba(0,229,255,0.7);
    background:rgba(0,229,255,0.18);
    border-radius:100px;
    backdrop-filter:blur(8px);
  }

  .work-title-big{
    font-family:var(--serif);
    font-size:1.8rem;
    font-weight:400;
    color:var(--text);
    line-height:1.1;
    transition:color 0.3s;
    margin-bottom:0.5rem;
  }
  .work-card.large .work-title-big{font-size:2.5rem}
  .work-card.medium .work-title-big{font-size:2.2rem}

  .work-snippet{
    font-size:18px;
    color:var(--text-2);
    line-height:1.5;
    max-width:400px;
    display:none;
  }
  .work-card.large .work-snippet,
  .work-card.medium .work-snippet{display:block}

  .work-num{
    position:absolute;
    top:2rem;left:2rem;
    font-family:var(--mono);
    font-size:15px;
    letter-spacing:0.2em;
    color:rgba(255,255,255,0.4);
    z-index:7;
  }

  .work-zoom{
    position:absolute;
    top:1.25rem;right:1.25rem;
    width:36px;height:36px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:8;
    cursor:pointer;
    opacity:0;
    transform:scale(0.85);
    transition:opacity 0.25s ease, transform 0.25s ease, background 0.2s;
  }
  .work-card:hover .work-zoom{opacity:1;transform:scale(1)}
  .work-zoom:hover{background:rgba(0,229,255,0.3);border-color:rgba(0,229,255,0.7)}
  .work-zoom svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}


  body.light .work-title-big{color:#ffffff}
  body.light .work-snippet{color:rgba(255,255,255,0.85)}
  body.light .work-num{color:rgba(255,255,255,0.5)}
  body.light .work-cat{
    color:#ffffff;
    border-color:rgba(255,255,255,0.7);
    background:rgba(255,255,255,0.2);
  }
  .process{
    padding:8rem 2.5rem;
    background:var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:3;
  }
  .process-inner{max-width:1300px;margin:0 auto}
  .process-head{margin-bottom:5rem;text-align:center}
  .process-head .section-tag{justify-content:center}

  .process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    border:none;
  }
  .process-step{
    padding:2.5rem 2rem;
    border:1px solid var(--line);
    border-radius:24px;
    position:relative;
    transition:background 0.4s;
    overflow:hidden;
  }

  .process-step:hover{background:var(--cyan-dim)}
  .process-step::before{display:none}
  .process-step:hover::before{display:none}

  .process-num{
    font-family:var(--serif);
    font-size:4rem;
    font-style:normal;
    color:var(--cyan);
    line-height:1;
    margin-bottom:1.5rem;
    opacity:0.8;
    padding-bottom:1.5rem;
    position:relative;
  }
  .process-num::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;
    height:1px;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
    transition:width 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  .process-step:hover .process-num::after{width:100%}
  .process-name{
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:400;
    color:var(--text);
    margin-bottom:0.75rem;
  }
  .process-desc{
    font-size:19px;
    color:var(--text-2);
    line-height:1.6;
  }

  /* ========== CTA BAND ========== */
  .cta-band{
    padding:10rem 2.5rem;
    text-align:center;
    position:relative;
    z-index:3;
    overflow:hidden;
  }
  .cta-band::before{
    content:'';
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:120%;
    height:200%;
    background:radial-gradient(ellipse 50% 30% at 50% 50%,rgba(0,229,255,0.2),transparent 60%);
    pointer-events:none;
  }
  .cta-band-h{
    font-family:var(--serif);
    font-size:clamp(3rem,8vw,7rem);
    font-weight:400;
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--text);
    position:relative;
    margin-bottom:2rem;
  }
  .cta-band-h em{
    font-style:normal;
    color:var(--cyan);
    position:relative;
  }
  .cta-band-h em::before{
    content:'✦';
    position:absolute;
    top:-0.4em;right:-0.6em;
    font-size:0.4em;
    font-style:normal;
    animation:rotate-slow 8s linear infinite;
  }
  .cta-band-sub{
    font-size:24px;
    color:var(--text-2);
    margin-bottom:3rem;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
  }
  .cta-band-actions{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    position:relative;
    max-width:320px;
    margin:0 auto;
  }

  /* ========== CONTACT ========== */
  .contact{
    padding:8rem 2.5rem;
    background:var(--bg-2);
    border-top:1px solid var(--line);
    position:relative;
    z-index:3;
  }
  .contact-inner{
    max-width:900px;
    margin:0 auto;
  }
  .contact-form{
    margin-top:3rem;
    border:1px solid var(--line-2);
    border-radius:24px;
    overflow:hidden;
  }
  .form-row{
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .form-row:last-child{border-bottom:none}
  .form-row label{
    display:block;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--text-2);
    padding:1.25rem 1.5rem 0.5rem;
  }
  .form-row input,.form-row textarea{
    width:100%;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text);
    font-family:var(--sans);
    font-size:18px;
    padding:0 1.5rem 1.5rem;
    resize:vertical;
  }
  .form-row textarea{min-height:140px}
  .form-row::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:1px;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
    transition:width 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .form-row:focus-within::after{width:100%}

  .form-submit-row{
    padding:1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
  }
  .form-submit-row .btn{border-radius:100px;width:auto;cursor:pointer}
  .form-note{
    font-family:var(--mono);
    font-size:17px;
    color:var(--text-2);
    letter-spacing:0.1em;
  }

  /* ========== CONTACT FORM 7 OVERRIDES ========== */
  .contact-form .wpcf7{padding:0;margin:0}
  .contact-form .wpcf7-form{margin:0;padding:0;display:flex;flex-direction:column}

  /* Each <p> tag from CF7 becomes a styled form row */
  .contact-form .wpcf7-form p{
    margin:0;
    padding:1.25rem 1.5rem;
    border-bottom:1px solid var(--line);
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .contact-form .wpcf7-form p:has(.wpcf7-submit){
    border-bottom:none;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    padding:1.5rem;
  }
  /* Bottom underline animation */
  .contact-form .wpcf7-form p::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:1px;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
    transition:width 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .contact-form .wpcf7-form p:focus-within::after{width:100%}

  /* Labels */
  .contact-form .wpcf7-form label{
    display:block;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--text-2);
    margin:0;
    padding:0;
  }

  /* Input fields */
  .contact-form .wpcf7-form input[type="text"],
  .contact-form .wpcf7-form input[type="email"],
  .contact-form .wpcf7-form input[type="tel"],
  .contact-form .wpcf7-form input[type="url"],
  .contact-form .wpcf7-form input[type="number"],
  .contact-form .wpcf7-form textarea,
  .contact-form .wpcf7-form select{
    width:100%;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text);
    font-family:var(--sans);
    font-size:18px;
    padding:0;
    margin:0;
    box-shadow:none;
    border-radius:0;
    resize:vertical;
    -webkit-appearance:none;
    appearance:none;
  }
  .contact-form .wpcf7-form textarea{min-height:140px}
  .contact-form .wpcf7-form input::placeholder,
  .contact-form .wpcf7-form textarea::placeholder{
    color:var(--text-3);
    opacity:0.9;
    font-family:var(--sans);
    line-height:32px;
  }

  /* Submit button — restyle to match our btn-primary */
  .contact-form .wpcf7-form input[type="submit"],
  .contact-form .wpcf7-form .wpcf7-submit{
    background:var(--cyan);
    color:#000;
    font-family:var(--sans);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:1rem 2rem;
    border:none;
    border-radius:100px;
    cursor:pointer;
    width:auto;
    display:inline-block;
    transition:all 0.3s;
  }
  .contact-form .wpcf7-form input[type="submit"]:hover,
  .contact-form .wpcf7-form .wpcf7-submit:hover{
    background:#fff;
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(0,229,255,0.25);
  }

  /* Loading spinner positioning */
  .contact-form .wpcf7-spinner{
    background-color:var(--cyan);
    margin:0 0 0 1rem;
  }

  /* Response messages */
  .contact-form .wpcf7-response-output{
    margin:0 !important;
    padding:1rem 1.5rem !important;
    border:none !important;
    border-top:1px solid var(--line) !important;
    border-radius:0 !important;
    font-family:var(--sans);
    font-size:15px;
    color:var(--text);
    background:rgba(0,229,255,0.08);
  }
  .contact-form .wpcf7 form.invalid .wpcf7-response-output,
  .contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
  .contact-form .wpcf7 form.payment-required .wpcf7-response-output{
    background:rgba(255,80,80,0.12);
    color:#ff8080;
  }
  .contact-form .wpcf7 form.sent .wpcf7-response-output{
    background:rgba(80,255,150,0.12);
    color:#80ffaa;
  }

  /* Inline validation error tip */
  .contact-form .wpcf7-not-valid-tip{
    color:#ff8080;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.05em;
    margin-top:0.4rem;
    padding:0;
  }

  /* Light mode adjustments */
  body.light .contact-form .wpcf7-form input[type="submit"],
  body.light .contact-form .wpcf7-form .wpcf7-submit{color:#fff}
  body.light .contact-form .wpcf7-form input[type="submit"]:hover,
  body.light .contact-form .wpcf7-form .wpcf7-submit:hover{background:var(--text)}


  /* ========== FOOTER ========== */
  footer{
    padding:2.5rem;
    background:var(--bg);
    border-top:1px solid var(--line);
    position:relative;
    z-index:3;
  }
  .footer-inner{
    max-width:1300px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
  }
  .footer-l,.footer-r{
    font-family:var(--mono);
    font-size:14px;
    letter-spacing:0.1em;
    color:var(--text-3);
  }

  /* ========== REVEAL ========== */
  .reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 1s cubic-bezier(0.65,0,0.35,1),transform 1s cubic-bezier(0.65,0,0.35,1);
  }
  .reveal.in{opacity:1;transform:translateY(0)}

  /* ========== MOBILE MENU ========== */
  .mobile-menu{
    display:none;
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:99;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2rem;
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    font-family:var(--sans);
    font-style:normal;
    font-weight:300;
    font-size:1.75rem;
    color:var(--text);
    text-decoration:none;
  }
  .mobile-menu a:hover{color:var(--cyan)}

  /* ========== RESPONSIVE ========== */
  @media (max-width:1024px){
    .nav-links{display:none}
    .menu-btn{display:flex}

    .hero-bottom{grid-template-columns:1fr;gap:2rem}
    .hero-cta-row{margin-left:0}
    .about-inner{grid-template-columns:1fr;gap:3rem}
    .stats-row{grid-template-columns:1fr 1fr}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}

    .services-list{grid-template-columns:1fr}
    .service-row{padding:2rem}
    .service-arrow{display:none}

    .work-card.large,.work-card.medium{grid-column:span 12;min-height:400px}
    .work-card.small{grid-column:span 12;min-height:300px}
    .work-card{min-width:0}

    .process-grid{grid-template-columns:1fr 1fr}
    .process-step:nth-child(2){border-right:none}
    .process-step:nth-child(1),.process-step:nth-child(2){border-bottom:1px solid var(--line)}
  }

  @media (max-width:768px){
    nav{padding:0 1.25rem}
    .nav-inner{padding:1rem 0}
    .nav-links{display:none}
    .menu-btn{display:flex}

    .hero{padding:0 1.25rem}
    .hero-inner{padding:7rem 0 3rem}
    .hero-h1{font-size:clamp(2.5rem,14vw,5rem)}
    .marquee-item{font-size:1.5rem;gap:3rem}
    .marquee-track{gap:3rem}

    .about,.services,.work,.process,.cta-band,.contact{padding:5rem 1.25rem}
    .work-inner,.services-inner,.process-inner,.contact-inner,.about-inner{max-width:100%}

    /* About body — prevent text overflow */
    .about-body{min-width:0;overflow-wrap:break-word;word-wrap:break-word}
    .about-body p{max-width:100%}

    /* Stats — shrink number font and box padding so 2x2 fits */
    .stats-row{grid-template-columns:1fr 1fr;gap:0.75rem}
    .stat{padding:1.5rem 1rem;min-width:0}
    .stat-num{font-size:48px}
    .stat-num em{font-size:0.5em}
    .stat-label{font-size:13px}

    .services-list{grid-template-columns:1fr}
    .service-row{padding:2rem}
    .service-num{display:block}
    .service-h{font-size:1.8rem}

    .work-grid{
      display:flex;
      flex-direction:column;
      gap:1rem;
      width:100%;
    }
    .work-card,
    .work-card.large,
    .work-card.medium,
    .work-card.small{
      width:100%;
      min-height:280px;
      aspect-ratio:auto;
      grid-column:unset;
      border-radius:16px;
    }
    .work-card.large .work-title-big,
    .work-card.medium .work-title-big{font-size:1.5rem}
    .work-info,
    .work-card.large .work-info,
    .work-card.medium .work-info{padding:1.5rem}
    .work-card.large .work-snippet,
    .work-card.medium .work-snippet{display:none}

    .process-grid{grid-template-columns:1fr}
    .process-step{border-right:none;border-bottom:1px solid var(--line)}
    .process-step:last-child{border-bottom:none}

    .intro-counter{font-size:5rem}

    /* Modal — chevrons go below picture, 16px image radius */
    .img-modal{padding:1rem}
    .img-modal img{
      border-radius:16px;
      grid-area:img;
    }
    .img-modal-wrap{
      display:grid;
      grid-template-areas:
        "img img"
        "prev next";
      gap:32px 64px;
      justify-content:center;
      align-items:center;
      justify-items:center;
    }
    .img-modal-nav,
    .img-modal-wrap:hover .img-modal-nav{
      position:relative;
      top:auto;
      left:auto;
      right:auto;
      transform:none;
      opacity:1;
    }
    .img-modal-nav.prev{grid-area:prev;left:auto}
    .img-modal-nav.next{grid-area:next;right:auto}
  }

  @media (max-width:480px){
    .hero-cta-row{flex-direction:column;align-items:stretch}
    .btn{justify-content:center}
    .footer-inner{flex-direction:column;align-items:flex-start;text-align:left}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
    }
  }