@import url(/css/footer.css);
  @import url('/css/nav.css');
  
  :root{
    --navy:#233746; --cream:#E8D9A9; --sage:#9EB088; --leaf:#7C9C6A; --ink:#0F1F2A;
    --card:#ffffff10; --border:#ffffff22; --muted:#ffffffc4; --muted-2:#ffffff99;
    --ring: 0 0 0 2px color-mix(in oklab, var(--cream) 70%, white 0%);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);
    --shadow-md: 0 12px 35px rgba(0,0,0,.28);
    --radius: 18px;
  }
  *{box-sizing:border-box}
  html:focus-within{scroll-behavior:smooth}
  body{
    margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
    color:#fff; background:linear-gradient(180deg, #1b2a35, var(--navy) 30%, #1f2f3c);
    overflow-x:hidden;
  }
  body.no-scroll{overflow:hidden}
  a{color:inherit}
  img{max-width:100%; display:block}
  .container{max-width:1180px; margin:auto; padding:0 20px}

  /* Ambient layers */
  .bg-mesh{position:fixed; inset:-20vmax; z-index:-3; filter:blur(60px); opacity:.75; pointer-events:none}
  .bg-mesh::before, .bg-mesh::after{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(42vmax 42vmax at 15% 25%, #7C9C6A33, transparent 60%),
      radial-gradient(36vmax 36vmax at 85% 30%, #E8D9A930, transparent 62%),
      radial-gradient(38vmax 38vmax at 30% 85%, #9EB0882b, transparent 62%);
    animation:floatMesh 26s ease-in-out infinite alternate;
  }
  .bg-mesh::after{ filter:hue-rotate(28deg) saturate(1.2); animation-duration:34s; mix-blend-mode:screen; }
  @keyframes floatMesh{ to{ transform:translate3d(3vw,-2vh,0) rotate(3deg) scale(1.05);} }
  .noise{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
    mix-blend-mode:overlay;
  }

   @keyframes reveal { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

  /* ===== Buttons (unchanged) ===== */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; background:linear-gradient(180deg, var(--cream), #fefefe); color:var(--ink); font-weight:800; text-decoration:none; box-shadow:var(--shadow-md); transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease}
  .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
  .btn.secondary{background:linear-gradient(180deg, #ffffff14, #ffffff0a); color:#fff; box-shadow:none; border:1px solid var(--border)}
  .btn.secondary:hover{background:#ffffff18}
  .chip{display:inline-block; padding:6px 10px; border-radius:999px; background:#ffffff14; border:1px solid var(--border); font-weight:700; letter-spacing:.2px}

  /* ===== Hero / rest of styles (unchanged) ===== */
  .hero{
    position:relative; overflow:clip;
    background:
      radial-gradient(1200px 600px at 80% -10%, #9EB08814, transparent 70%),
      radial-gradient(1000px 600px at -10% 20%, #E8D9A912, transparent 70%),
      linear-gradient(180deg, #0000, #0000 60%, #0002);
  }
  .hero .wrap{
    padding: clamp(96px, 10vw, 150px) 0 clamp(54px, 6vw, 84px);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items:center;
  }
  @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
  .hero h1{
    margin:0 0 10px;
    font-size:clamp(2.2rem, 3.8vw + 1rem, 4rem);
    line-height:1.06; letter-spacing:.15px;
    background:linear-gradient(90deg,#fff,#fff,#ffffffcc);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .lead{max-width:48ch; color:var(--muted); font-size:1.15rem}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
  .composition{position:relative; min-height: 380px}
  .floating{
    position:absolute; inset:auto 6% 0 auto; width:min(420px, 92%); padding:18px;
    border-radius:20px; border:1px solid var(--border);
    background:linear-gradient(180deg,#ffffff14,#ffffff0a);
    box-shadow:0 18px 60px rgba(0,0,0,.35); backdrop-filter:blur(10px);
  }
  .widget-title{margin:0 0 6px; font-weight:800}
  .widget-sub{margin:0; color:var(--muted)}
  .kpi-row{display:flex; gap:12px; margin-top:12px}
  .kpi{flex:1; border:1px solid var(--border); background:#ffffff10; padding:12px; border-radius:14px}
  .kpi .num{font-weight:900; font-size:1.25rem}

  .section{padding:78px 0}
  .section h2{font-size:clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin:0 0 12px; text-align:center}
  .section .sub{max-width:900px; margin:8px auto 0; text-align:center; color:var(--muted)}

  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
  .card{
    position:relative; border:1px solid var(--border); background:linear-gradient(180deg, #ffffff12, #ffffff08);
    padding:18px; border-radius:var(--radius); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease; transform-style:preserve-3d; overflow:hidden;
  }
  .card::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
    background:conic-gradient(from 180deg at 50% 50%, #ffffff22, #ffffff44, #ffffff22);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; transition:opacity .3s; opacity:.6;
  }
  .card h3{margin:0 0 6px}
  .card:hover{transform:translateY(-8px) rotateX(4deg) rotateY(-4deg); box-shadow:var(--shadow-lg)}
  .card:after{content:""; position:absolute; inset:-40% -40% auto auto; width:60%; aspect-ratio:1/1; border-radius:50%;
    background:radial-gradient(#ffffff55, transparent 65%); opacity:0; transition:opacity .35s}
  .card:hover:after{opacity:.9}

  @media (max-width:980px){ .cards{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .cards{grid-template-columns:1fr} }

  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px}
  .stat{border:1px solid var(--border); background:linear-gradient(180deg,#ffffff12,#ffffff08); padding:16px; border-radius:16px; text-align:center; transform:translateY(8px); opacity:0}
  .stat .num{font-size:2rem; font-weight:900}
  @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .stats{grid-template-columns:1fr} }

  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px}
  .step{position:relative; background:linear-gradient(180deg,#ffffff12,#ffffff08); border:1px solid var(--border); padding:16px; border-radius:16px; overflow:hidden; transform:translateY(10px); opacity:0}
  .step .badge{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cream); color:var(--ink); font-weight:900; margin-bottom:10px; box-shadow:0 6px 16px #0003}
  .step .pulse{position:absolute; inset:auto auto -20px -20px; width:120px; height:120px; background:radial-gradient(#E8D9A933, transparent 60%); filter:blur(10px); opacity:.6}
  @media (max-width:980px){ .steps{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .steps{grid-template-columns:1fr} }

  .project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
  .project{position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#ffffff12,#ffffff08); transition:transform .25s, box-shadow .25s}
  .project:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}
  .project .figure{aspect-ratio:16/9; background:#ffffff0a; overflow:hidden}
  .project img{inline-size:100%; block-size:100%; object-fit:cover; transform:scale(1.02); transition:transform .5s ease}
  .project:hover img{transform:scale(1.07)}
  .project .meta{padding:14px}
  .project a{color:var(--cream); text-decoration:none; position:relative}
  .project a::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(.25); transform-origin:left; transition:transform .25s}
  .project a:hover::after{transform:scaleX(1)}
  @media (max-width:980px){ .project-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .project-grid{grid-template-columns:1fr} }

  .testis{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
  .testi{border:1px solid var(--border); background:linear-gradient(180deg,#ffffff12,#ffffff08); padding:18px; border-radius:16px; transform:translateY(10px); opacity:0}
  .testi .who{display:flex; align-items:center; gap:10px; margin-top:10px}
  .testi .avatar{width:36px; height:36px; border-radius:50%; background:#ffffff22}
  @media (max-width:980px){ .testis{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .testis{grid-template-columns:1fr} }

  .faq{max-width:900px; margin:22px auto 0}
  details{border:1px solid var(--border); background:linear-gradient(180deg,#ffffff12,#ffffff08); border-radius:14px; padding:12px 14px; margin:10px 0; transition:background .3s, transform .2s}
  details[open]{background:#ffffff18; transform:translateY(-2px)}
  summary{cursor:pointer; font-weight:800}

  label{display:grid; gap:8px; margin:12px 0}
  input, textarea{background:#ffffff14; color:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px}
  input:focus, textarea:focus{outline:2px solid var(--cream)}
  .form-actions{display:flex; gap:12px; align-items:center; justify-content:center}

    .copy{color:#ffffff99; padding:16px 0; text-align:center}

  @media (prefers-reduced-motion: no-preference){
    .reveal{opacity:0; transform:translateY(16px); animation:reveal .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--delay,0s)}
    @keyframes reveal{to{opacity:1; transform:none}}
  }

  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .focus{outline:2px solid var(--cream); outline-offset:2px; border-radius:6px}


/* Clean, confident hero */
.hero{
  position:relative; overflow:clip;
  background:
    radial-gradient(1200px 600px at 80% -10%, #9EB08814, transparent 70%),
    radial-gradient(1000px 600px at -10% 20%, #E8D9A912, transparent 70%),
    linear-gradient(180deg, #0000, #0000 60%, #0002),
    /* ultra-subtle grid like Square */
    linear-gradient(#0000 31px, #ffffff10 32px),
    linear-gradient(90deg,#0000 31px, #ffffff10 32px);
  background-size: auto, auto, auto, 32px 32px, 32px 32px;
}

.hero .wrap{
  padding: clamp(108px, 10vw, 160px) 0 clamp(60px, 6vw, 92px);
}

.hero-grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items:center;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

/* Left: headline + sub + CTAs */
.hero h1{
  margin:0 0 12px;
  font-size: clamp(2.6rem, 3.6vw + 1rem, 4.2rem);
  line-height:1.04; letter-spacing:.1px;
  /* Apple-like crisp gradient text, very subtle */
  background: linear-gradient(90deg,#fff 0%, #ffffffd9 60%, #ffffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  max-width: 50ch; margin-top: 10px;
  color: var(--muted); font-size: 1.18rem;
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px; }
.btn--primary{
  position:relative; isolation:isolate;
  background: var(--cream); color: var(--ink);
  border-radius: 14px; padding: 12px 18px; font-weight: 800; text-decoration:none;
  border:1px solid #0000; box-shadow: 0 12px 36px rgba(0,0,0,.24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 48px rgba(0,0,0,.32);}
.btn--ghost{
  background: #0000; color:#fff; border:1px solid var(--border);
  border-radius:14px; padding:12px 18px; font-weight:800; text-decoration:none;
  transition: background .2s, transform .18s;
}
.btn--ghost:hover{ background:#ffffff11; transform: translateY(-2px); }

/* Right: one refined glass card + a tiny stat chip */
.composition{ position:relative; min-height: 420px; }
@media (max-width:980px){ .composition{ min-height: 360px; } }

.floating{
  position:absolute; backdrop-filter: blur(10px);
  background: linear-gradient(180deg,#ffffff14,#ffffff0a);
  border:1px solid var(--border); border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transform-style:preserve-3d; will-change: transform, opacity;
}

/* Main card — device-ish frame */
.float-main{
  inset: auto 4% 0 auto; width:min(460px, 94%); padding:18px;
  animation: heroDrift1 12s ease-in-out infinite alternate;
}
.widget-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.dot-row{ display:inline-flex; gap:6px; }
.dot{ width:8px; height:8px; border-radius:50%; background:#ffffff33; }
.widget-title{ margin:0; font-weight:800; }
.widget-sub{ margin:0; color:var(--muted); }

.kpi-row{ display:flex; gap:12px; margin-top:12px; }
.kpi{ flex:1; border:1px solid var(--border); background:#ffffff0e; padding:12px; border-radius:14px; }
.kpi .num{ font-weight:900; font-size:1.25rem }
.progress-bar{
  height:8px; border-radius:999px; background:#ffffff14; overflow:hidden; margin-top:12px;
}
.progress-bar > span{
  display:block; height:100%; width:72%; background:linear-gradient(90deg,var(--cream), #fff);
  border-radius:inherit; box-shadow: 0 0 18px #fff3 inset;
}

/* Tiny stat chip */
.float-chip{
  inset: 6% auto auto 6%; width: 160px; padding:14px; text-align:center;
  animation: heroDrift2 10s ease-in-out infinite alternate;
}
.badge{
  display:inline-grid; place-items:center; width: 36px; height:36px; border-radius:50%;
  background: var(--cream); color: var(--ink); font-weight:900; box-shadow: 0 6px 16px #0003;
}
.mini{ margin-top:8px; color: var(--muted); font-weight:700; }

@keyframes heroDrift1{ to{ transform: translate3d(6px,-8px,0) rotateX(2deg) rotateY(-3deg); } }
@keyframes heroDrift2{ to{ transform: translate3d(-6px,6px,0) rotateX(-2deg) rotateY(3deg); } }

@media (prefers-reduced-motion: reduce){
  .floating{ animation:none !important; }
}

.mock { --bar:#ffffff12; --line:#ffffff18; --chip:#ffffff22; --glow:#ffffff22;
  position: relative; border:1px solid var(--border);
  background: linear-gradient(180deg,#ffffff12,#ffffff08);
  border-radius: 22px; padding:0; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35); backdrop-filter: blur(10px);
}
.mock .topbar{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  background: linear-gradient(180deg,#ffffff10,#ffffff06);
}
.mock .dots{display:flex; gap:6px; margin-right:8px}
.mock .dot{width:10px; height:10px; border-radius:50%}
.mock .dot.r{background:#ff5f56}.mock .dot.y{background:#ffbd2e}.mock .dot.g{background:#27c93f}
.mock .tabs{display:flex; gap:10px; overflow:auto; padding-bottom:2px; scrollbar-width:none}
.mock .tab{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
  background:#ffffff0f; border:1px solid var(--line); white-space:nowrap; font-weight:700; font-size:.9rem;
}
.mock .url{
  margin-left:auto; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:#ffffff0a; font-weight:700; font-size:.88rem; color:var(--muted);
}
.mock .body{
  display:grid; grid-template-columns: 220px 1fr; gap:16px; padding:16px; min-height: 260px;
}
@media (max-width: 520px){ .mock .body{ grid-template-columns:1fr; } }
.mock .sidebar{ border:1px solid var(--line); border-radius:16px; padding:12px; background:#ffffff08; }
.mock .pill{ display:block; padding:10px 12px; border-radius:10px; background:#ffffff0e; border:1px solid var(--line); margin-bottom:8px; font-weight:700;}
.mock .pill.active{ background:var(--chip); color:#fff}
.mock .content{ border:1px solid var(--line); border-radius:16px; padding:14px; background:#ffffff08; position:relative; overflow:hidden; }
.mock .grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top:12px}
@media (max-width: 720px){ .mock .grid{ grid-template-columns:1fr; } }
.mock .card{ border:1px solid var(--line); border-radius:14px; background:#ffffff10; padding:12px; }
.mock .skeleton{ height:12px; border-radius:6px; background: linear-gradient(90deg,#ffffff12, #ffffff22, #ffffff12); animation: shimmer 1.2s linear infinite; background-size: 300% 100%; }
.mock .s1{ width:80% } .mock .s2{ width:60% } .mock .s3{ width:92% } .mock .s4{ width:70% }
@keyframes shimmer{ 0%{background-position: 0% 0} 100%{background-position: 300% 0} }
.mock.with-screenshot .body{ display:block; padding:0 }
.mock.with-screenshot img{ display:block; width:100%; height:auto; object-fit:cover }