:root{
    --cream:#F5F1E8;
    --white:#FFFFFF;
    --ink:#171717;
    --muted:#6F6B63;
    --yellow:#F4C430;
    --border:#DDD8CE;
    --ease:cubic-bezier(0.22,1,0.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}

  .container{
    width:min(1280px, calc(100% - 80px));
    margin-inline:auto;
  }
  @media (max-width:1024px){
    .container{width:calc(100% - 64px);}
  }
  @media (max-width:600px){
    .container{width:calc(100% - 40px);}
  }

  .eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--muted);
  }

  .serif{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;}

  /* Reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---------- SCROLL PROGRESS ---------- */
  .scroll-progress{
    position:fixed;top:0;left:0;height:3px;
    background:var(--yellow);
    width:0%;
    z-index:80;
    transition:width 0.1s linear;
  }

  /* ---------- CUSTOM CURSOR ---------- */
  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;
    pointer-events:none;z-index:90;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:6px;height:6px;background:var(--ink);
  }
  .cursor-ring{
    width:36px;height:36px;
    border:1px solid var(--ink);
    opacity:0.5;
    transition:width 0.25s var(--ease),height 0.25s var(--ease),
               background 0.25s var(--ease),opacity 0.25s var(--ease),
               border-color 0.25s var(--ease);
  }
  .cursor-ring.hovered{
    width:64px;height:64px;
    background:var(--yellow);
    opacity:0.25;
    border-color:transparent;
  }
  @media (hover:none), (max-width:840px){
    .cursor-dot,.cursor-ring,.scroll-progress{display:none;}
  }

  @keyframes floatY{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  @keyframes floatSlow{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(8px) scale(1.04);}
  }
  @keyframes pulseRing{
    0%,100%{box-shadow:0 0 0 0 rgba(244,196,48,0.0);}
    50%{box-shadow:0 0 0 8px rgba(244,196,48,0.12);}
  }

  /* word-stagger for headings */
  .word-stagger{display:inline-block;overflow:hidden;vertical-align:top;}
  .word-stagger span{
    display:inline-block;
    transform:translateY(110%);
    transition:transform 0.85s var(--ease);
    transition-delay:calc(var(--i) * 55ms);
  }
  .split-title.in .word-stagger span{transform:translateY(0);}

  /* ---------- HERO ---------- */
  .hero{padding:64px 0 120px;}
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:48px;
    align-items:center;
  }
  .hero-title{
    font-size:clamp(42px,5.2vw,70px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-0.01em;
    max-width:680px;
  }
  .hero-meta{
    margin-top:36px;
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    font-size:14px;
    color:var(--muted);
  }
  .hero-meta strong{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px;}
  .hero-eyebrow{margin-bottom:22px;display:block;}

  .hero-visual{position:relative;height:420px;}
  .device-wrap{
    position:absolute;inset:0;
    perspective:1400px;
  }
  .device-tilt{
    position:absolute;inset:0;
    transition:transform 0.35s var(--ease);
    transform-style:preserve-3d;
  }
  .laptop{
    position:absolute;
    top:10px;left:0;
    width:86%;
    transform:rotateX(6deg) rotateY(-10deg) rotateZ(1deg);
    transform-style:preserve-3d;
    animation:floatY 6s ease-in-out infinite;
  }
  .laptop-screen{
    background:var(--ink);
    border-radius:10px 10px 3px 3px;
    padding:10px 10px 4px;
    box-shadow:0 40px 70px -20px rgba(23,23,23,0.35);
  }
  .laptop-screen-inner{
    aspect-ratio:16/10;
    background:linear-gradient(180deg,#e9e4d8,#f5f1e8);
    border-radius:3px;
    overflow:hidden;
    position:relative;
  }
  .laptop-base{
    height:10px;background:#1f1f1f;border-radius:0 0 8px 8px;
    margin:0 -6px;
  }
  .phone{
    position:absolute;
    bottom:-18px;right:2%;
    width:30%;
    max-width:150px;
    transform:rotateX(4deg) rotateY(-8deg) rotateZ(-2deg) translateZ(40px);
    animation:floatY 5s ease-in-out infinite;
    animation-delay:0.4s;
  }
  .phone-frame{
    background:var(--ink);
    border-radius:26px;
    padding:8px;
    box-shadow:0 30px 50px -15px rgba(23,23,23,0.4);
  }
  .phone-screen{
    aspect-ratio:9/19.5;
    background:linear-gradient(180deg,#eee9dd,#f5f1e8);
    border-radius:20px;
    overflow:hidden;
  }
  .mock-mark{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:7% 8%;
  }
  .mock-mark .m-top{display:flex;justify-content:space-between;align-items:center;}
  .mock-bar{background:rgba(23,23,23,0.12);border-radius:3px;}
  .mock-word{font-family:'DM Serif Display',serif;font-style:italic;color:var(--ink);opacity:0.75;}
  .laptop .mock-word{font-size:15px;}
  .phone .mock-word{font-size:10px;}

  .hero-accent{
    position:absolute;
    width:64px;height:64px;
    border-radius:50%;
    background:var(--yellow);
    top:-6px;right:8%;
    z-index:-1;
    opacity:0.9;
    animation:floatSlow 7s ease-in-out infinite;
  }

  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{height:320px;margin-top:20px;}
  }

  /* ---------- SECTION shell ---------- */
  section{padding:120px 0;border-top:1px solid var(--border);}
  section.tight{padding:100px 0;}
  .sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:56px;max-width:640px;}
  .sec-title{
    font-size:clamp(30px,3.6vw,50px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-0.01em;
  }
  .sec-copy{color:var(--muted);font-size:15.5px;max-width:480px;}

  /* ---------- OUTPUT ---------- */
  .output-grid{
    display:grid;
    grid-template-columns:0.85fr 1fr;
    gap:64px;
    align-items:center;
  }
  .output-left .sec-title{max-width:420px;}
  .output-preview{
    width:100%;
    max-width:560px;
    margin-left:auto;
    border-radius:22px;
    border:1px solid var(--border);
    background:var(--white);
    box-shadow:0 30px 60px -30px rgba(23,23,23,0.25);
    overflow:hidden;
    transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease);
  }
  .output-preview:hover{
    transform:translateY(-6px);
    box-shadow:0 40px 80px -30px rgba(23,23,23,0.32);
  }
  .preview-bar{
    height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;
    border-bottom:1px solid var(--border);
  }
  .preview-bar span{width:7px;height:7px;border-radius:50%;background:var(--border);}
  .preview-screen{
    height:620px;overflow-y:auto;
    background:linear-gradient(180deg,#f7f4ec,#ffffff);
    scrollbar-width:none;
  }
  .preview-screen::-webkit-scrollbar{display:none;}
  .preview-block{padding:32px;}
  .preview-hero{height:220px;border-radius:10px;background:linear-gradient(135deg,#1f2a24,#3a4a3f);margin-bottom:22px;display:flex;align-items:flex-end;padding:20px;}
  .preview-hero span{color:#f5f1e8;font-family:'DM Serif Display',serif;font-style:italic;font-size:20px;}
  .preview-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .preview-card{height:110px;background:#efece2;border-radius:8px;border:1px solid var(--border);transition:background 0.3s;}
  .preview-card:hover{background:#e7e2d3;}
  .preview-lines{margin-top:22px;}
  .preview-lines div{height:9px;background:#e7e2d5;border-radius:4px;margin-bottom:10px;}
  .preview-lines div:nth-child(1){width:80%;}
  .preview-lines div:nth-child(2){width:92%;}
  .preview-lines div:nth-child(3){width:60%;}

  @media (max-width:960px){
    .output-grid{grid-template-columns:1fr;}
    .output-preview{margin-left:0;max-width:420px;}
    .preview-screen{height:560px;}
  }

  /* ---------- DESIGN LANGUAGE ---------- */
  .lang-grid{
    display:grid;
    grid-template-columns:0.8fr 1fr;
    gap:64px;
  }
  .lang-row{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:24px;
    padding:26px 0;
    border-top:1px solid var(--border);
  }
  .lang-row:last-child{border-bottom:1px solid var(--border);}
  .lang-label{font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--muted);padding-top:4px;}
  .swatch-row{display:flex;gap:10px;margin-bottom:14px;}
  .swatch{width:44px;height:44px;border-radius:8px;border:1px solid var(--border);transition:transform 0.3s var(--ease);}
  .swatch:hover{transform:translateY(-5px);}
  .type-sample{font-size:34px;font-weight:700;margin-bottom:10px;}
  .wireframe{display:flex;flex-direction:column;gap:8px;max-width:280px;}
  .wireframe .wf-block{height:12px;background:#e7e2d5;border-radius:3px;}
  .wireframe .wf-block.short{width:55%;}
  .interaction-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:8px;}
  .lang-copy{color:var(--muted);font-size:14.5px;max-width:420px;}

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

  /* ---------- ROADMAP ---------- */
  .roadmap{position:relative;margin-top:20px;}
  .roadmap-track{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:relative;
  }
  .roadmap-line{
    position:absolute;
    top:24px;left:0;right:0;
    height:1px;
    background:var(--border);
  }
  .roadmap-line-fill{
    position:absolute;top:0;left:0;height:1px;width:100%;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.4s var(--ease);
  }
  .roadmap-line-fill.on{transform:scaleX(1);}
  .stage{
    position:relative;
    display:flex;flex-direction:column;align-items:flex-start;
    padding-right:16px;
    opacity:0;transform:translateY(14px);
    transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);
  }
  .stage.on{opacity:1;transform:translateY(0);}
  .node{
    width:48px;height:48px;border-radius:50%;
    background:var(--cream);
    border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;
    margin-bottom:20px;
    transition:background 0.3s,color 0.3s,transform 0.3s;
  }
  .stage:hover .node{background:var(--yellow);transform:scale(1.08);}
  .stage.on .node{animation:pulseRing 3.4s ease-in-out infinite;}
  .stage-name{font-weight:700;font-size:14.5px;margin-bottom:6px;}
  .stage-desc{font-size:13.5px;color:var(--muted);max-width:210px;}

  @media (max-width:900px){
    /* Mobile timeline: keep the connector exactly through the
       centre of every numbered node. */
    .roadmap-track{
      grid-template-columns:1fr;
      gap:36px;
      position:relative;
    }

    .roadmap-line{
      display:none;
    }

    .roadmap-track::before{
      content:"";
      position:absolute;
      left:24px;                 /* 48px node / 2 */
      top:24px;
      bottom:24px;
      width:1px;
      background:var(--border);
      z-index:0;
    }

    .stage{
      display:grid;
      grid-template-columns:48px minmax(0,1fr);
      column-gap:24px;
      align-items:start;
      padding:0 0 4px;
      border:0;
      position:relative;
    }

    .node{
      grid-column:1;
      grid-row:1;
      margin:0;
      position:relative;
      z-index:2;
      flex:none;
    }

    .stage-name,
    .stage-desc{
      grid-column:2;
    }

    .stage-name{
      margin-top:2px;
    }
  }

  /* ---------- CLIENT ---------- */
  .client-sec{background:var(--white);}
  .client-grid{
    display:grid;
    grid-template-columns:0.7fr 1fr;
    gap:56px;
    align-items:start;
  }
  .client-info .co{font-weight:700;font-size:17px;margin-bottom:6px;}
  .client-info .loc{color:var(--muted);font-size:14.5px;}
  .testimonial-label{font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--muted);margin-bottom:18px;}
  .testimonial-box{
    border:1px solid var(--border);
    border-radius:14px;
    padding:32px;
    min-height:160px;
    display:flex;flex-direction:column;justify-content:center;
    gap:16px;
    transition:box-shadow 0.4s var(--ease),transform 0.4s var(--ease);
  }
  .testimonial-box:hover{
    box-shadow:0 24px 50px -28px rgba(23,23,23,0.25);
    transform:translateY(-3px);
  }
  .testimonial-placeholder-line{height:10px;background:#efece2;border-radius:4px;}
  .testimonial-placeholder-line.w1{width:92%;}
  .testimonial-placeholder-line.w2{width:78%;}
  .testimonial-who{display:flex;align-items:center;gap:12px;margin-top:6px;}
  .avatar-ph{width:44px;height:44px;border-radius:50%;background:var(--cream);border:1px solid var(--border);}
  .who-text .name{font-size:13.5px;font-weight:700;}
  .who-text .role{font-size:12.5px;color:var(--muted);}

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

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border);
    padding:64px 0 40px;
  }
  .foot-top{
    display:flex;justify-content:space-between;align-items:flex-start;
    flex-wrap:wrap;gap:32px;
    margin-bottom:48px;
  }
  .foot-brand{font-weight:700;font-size:15px;}
  .foot-tag{color:var(--muted);font-size:12.5px;letter-spacing:0.04em;margin-top:6px;}
  .foot-links{display:flex;gap:28px;font-size:13.5px;font-weight:600;}
  .foot-links a{display:inline-block;transition:transform 0.2s var(--ease);}
  .foot-bottom{
    border-top:1px solid var(--border);padding-top:24px;
    font-size:12.5px;color:var(--muted);
  }
  .marquee{
    overflow:hidden;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:18px 0;
    margin-bottom:48px;
  }
  .marquee-track{
    display:flex;width:max-content;
    animation:marquee 22s linear infinite;
  }
  .marquee-track span{
    font-family:'DM Serif Display',serif;
    font-style:italic;
    font-size:20px;
    color:var(--muted);
    padding:0 28px;
    white-space:nowrap;
  }
  .marquee-track span::after{content:'—';margin-left:28px;color:var(--border);font-style:normal;}
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion:reduce){
    .marquee-track{animation:none;}
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--ink);outline-offset:3px;
  }

  /* ---------- ACTUAL iGENT WEBSITE SCREENS ---------- */
  .laptop-screen-inner iframe,
  .phone-screen iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#fff;
  }
  .laptop-screen-inner iframe{
    width:1280px;
    height:800px;
    transform:scale(var(--laptop-scale,.45));
    transform-origin:top left;
  }
  .phone-screen iframe{
    width:390px;
    height:844px;
    transform:scale(var(--phone-scale,.27));
    transform-origin:top left;
  }
  /* Hero devices are presentation-only: no inner scrolling/input. */
  .hero-visual .laptop-screen-inner iframe,
  .hero-visual .phone-screen iframe{
    pointer-events:none;
    overflow:hidden;
  }
  .hero-visual .laptop-screen-inner,
  .hero-visual .phone-screen{
    background:#fff;
  }

  /* More precise device proportions and editorial spacing */
  .hero-visual{min-height:440px;}
  .laptop{width:88%;max-width:650px;}
  .phone{width:25%;max-width:145px;right:0;bottom:-10px;}
  .output-preview{max-width:520px;}
  .preview-screen{height:640px;}
  .output-left{padding-right:12px;}

  @media (max-width:960px){
    .hero-visual{height:350px;min-height:0;}
    .laptop{width:82%;}
    .phone{width:24%;max-width:130px;}
  }
  @media (max-width:600px){
    .hero{padding-top:42px;padding-bottom:78px;}
    section{padding:82px 0;}
    .hero-title{font-size:clamp(38px,11vw,50px);line-height:1.08;}
    .hero-meta{margin-top:26px;gap:18px;font-size:13px;}
    .hero-visual{height:270px;margin-top:10px;}
    .laptop{width:92%;left:0;top:10px;transform:rotateX(4deg) rotateY(-6deg);}
    .phone{width:27%;max-width:105px;right:-2px;bottom:-2px;}
    .laptop-screen{padding:7px 7px 3px;}
    .phone-frame{padding:6px;border-radius:20px;}
    .phone-screen{border-radius:15px;}
    .output-grid{gap:38px;}
    .output-preview{max-width:100%;}
    .preview-screen{height:560px;}
    .lang-row{grid-template-columns:92px 1fr;gap:16px;}
    .type-sample{font-size:28px;}
    .sec-head{margin-bottom:40px;}
  }


  .preview-screen iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#fff;
  }



/* Project website preview additions — keeps the supplied case-study design intact. */
.site-preview-img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;background:#fff;}
.phone-screen .site-preview-img{object-fit:cover;object-position:top center;}
.live-project{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px;transition:opacity .25s ease,transform .25s var(--ease);}
.live-project:hover{opacity:.6;transform:translateX(4px);}
.output-preview .site-preview-full{width:100%;display:block;height:auto;min-height:620px;object-fit:cover;object-position:top center;background:#fff;}
.project-note{color:var(--muted);font-size:14px;max-width:520px;}
.project-source{font-size:12px;color:var(--muted);margin-top:12px;}
.project-source a{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:600px){
  .output-preview .site-preview-full{min-height:0;max-height:none;object-fit:cover;}
  .live-project{font-size:12px;}
}