:root{
    --ink:#121A21;
    --ink-soft:#3D4954;
    --paper:#EEF1EA;
    --paper-raise:#FFFFFF;
    --navy:#0E2A3F;
    --navy-2:#16374F;
    --navy-3:#1E4560;
    --gold:#D9A441;
    --gold-deep:#B9832B;
    --sky:#4C7A92;
    --moss:#4B7B52;
    --line:#D8D3C2;
    --line-dark:#2C4A5F;
    --white:#FFFFFF;
    --radius:2px;
    --display: 'Space Grotesk', sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --maxw:1180px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sky);
    margin:0 0 10px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:18px; height:1px;
    background:var(--gold);
    display:inline-block;
  }
  h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; color:inherit; }
  .btn{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.03em;
    text-transform:uppercase;
    padding:13px 22px;
    border-radius:var(--radius);
    border:1px solid transparent;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    background:none;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-gold{ background:var(--gold); color:var(--navy); }
  .btn-gold:hover{ background:var(--gold-deep); }
  .btn-outline{ border-color:currentColor; color:var(--paper); }
  .btn-outline:hover{ background:rgba(255,255,255,.08); }
  .btn-ink{ border-color:var(--navy); color:var(--navy); }
  .btn-ink:hover{ background:var(--navy); color:var(--paper); }
  .btn-sm{ padding:9px 16px; font-size:12px; }
  .btn-block{ width:100%; justify-content:center; }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:60;
    background:var(--navy);
    border-bottom:1px solid var(--line-dark);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
    max-width:var(--maxw); margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--display); font-weight:700; font-size:19px;
    color:var(--paper); text-decoration:none; letter-spacing:.01em;
  }
  .brand-mark{
    width:26px; height:26px;
    background:
      linear-gradient(var(--line-dark),var(--line-dark)) 0 0/1px 100%,
      linear-gradient(var(--line-dark),var(--line-dark)) 100% 0/1px 100%,
      linear-gradient(90deg,var(--line-dark),var(--line-dark)) 0 0/100% 1px,
      linear-gradient(90deg,var(--line-dark),var(--line-dark)) 0 100%/100% 1px;
    background-repeat:no-repeat;
    background-color:var(--gold);
    clip-path:polygon(0 100%, 45% 0, 100% 100%);
  }
  nav.nav-links{ display:flex; gap:30px; }
  nav.nav-links a{
    font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
    color:#C9D3D9; text-decoration:none; padding:6px 0; border-bottom:1px solid transparent;
  }
  nav.nav-links a:hover{ color:var(--paper); border-color:var(--gold); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none; background:none; border:1px solid var(--line-dark); color:var(--paper);
    width:40px; height:40px; border-radius:var(--radius); align-items:center; justify-content:center;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; display:block; width:18px; height:1px; background:var(--paper); position:relative;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(ellipse at 85% 0%, rgba(217,164,65,.16), transparent 55%),
      var(--navy);
    color:var(--paper);
    padding:78px 0 64px;
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    max-width:var(--maxw); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  }
  .hero h1{
    font-size:clamp(34px, 4.4vw, 54px);
    line-height:1.06;
    letter-spacing:-.01em;
    max-width:15ch;
  }
  .hero h1 em{ font-style:normal; color:var(--gold); }
  .hero p.lede{
    font-size:17px; color:#B8C4CC; max-width:46ch; margin:20px 0 32px;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .hero-meta{
    margin-top:34px; display:flex; gap:26px; font-family:var(--mono); font-size:12px; color:#8FA3AD;
    flex-wrap:wrap;
  }
  .hero-meta b{ color:var(--paper); font-weight:500; }

  .panel-art{
    position:relative; border:1px solid var(--line-dark); border-radius:var(--radius);
    padding:18px; background:linear-gradient(160deg,var(--navy-2),var(--navy-3));
    overflow:hidden;
  }
  .panel-art::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 42%, rgba(217,164,65,.4) 50%, transparent 58%);
    transform:translateX(-130%);
    animation:sweep 6s ease-in-out infinite;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){ .panel-art::after{ display:none; } }
  @keyframes sweep{
    0%,15%{ transform:translateX(-130%); }
    55%,100%{ transform:translateX(130%); }
  }
  .cell-grid{
    display:grid; grid-template-columns:repeat(8,1fr); gap:5px; position:relative; z-index:1;
  }
  .cell-grid span{
    aspect-ratio:1.4/1; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12); border-radius:1px;
  }
  .panel-art-cap{
    display:flex; justify-content:space-between; margin-top:14px; padding-top:12px;
    border-top:1px solid var(--line-dark); font-family:var(--mono); font-size:11px; color:#8FA3AD;
    position:relative; z-index:1;
  }

  /* ---------- TRUST STRIP ---------- */
  .trust-strip{ background:var(--paper-raise); border-bottom:1px solid var(--line); }
  .trust-row{
    max-width:var(--maxw); margin:0 auto; padding:26px 28px;
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .trust-item{ padding:0 22px; border-left:1px solid var(--line); }
  .trust-item:first-child{ border-left:none; padding-left:0; }
  .trust-num{ font-family:var(--display); font-size:26px; font-weight:600; color:var(--navy); }
  .trust-label{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
  .demo-note{
    max-width:var(--maxw); margin:0 auto; padding:0 28px 22px; font-family:var(--mono);
    font-size:11.5px; color:var(--ink-soft);
  }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:76px 0; }
  .section-head{ max-width:640px; margin-bottom:40px; }
  .section-head h2{ font-size:clamp(26px,3vw,36px); letter-spacing:-.01em; }
  .section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; max-width:56ch; }
  .band-dark{ background:var(--navy); color:var(--paper); }
  .band-dark .section-head p{ color:#B8C4CC; }
  .band-dark .eyebrow{ color:#7FB0C4; }

  /* ---------- PRODUCTS ---------- */
  .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .card{
    background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; display:flex; flex-direction:column; gap:14px;
  }
  .card-icon{
    width:42px; height:42px; border:1px solid var(--line); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; color:var(--navy);
    background:var(--paper);
  }
  .card-icon svg{ width:22px; height:22px; }
  .card h3{ font-size:18px; }
  .card .tag{
    font-family:var(--mono); font-size:11px; color:var(--sky); text-transform:uppercase; letter-spacing:.03em;
  }
  .spec-table{ font-family:var(--mono); font-size:12.5px; border-top:1px solid var(--line); }
  .spec-row{
    display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); color:var(--ink-soft);
  }
  .spec-row b{ color:var(--ink); font-weight:500; }
  .card-price{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
  .card-price .amt{ font-family:var(--display); font-size:20px; font-weight:600; color:var(--navy); }
  .card-price .unit{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
  .card-actions{ display:flex; gap:10px; margin-top:auto; padding-top:6px; }
  #productGrid .card{ min-width:0; }
  #productGrid .card h3,#productGrid .tag{ overflow-wrap:anywhere; }
  .catalog-image{ overflow:hidden; flex-shrink:0; }
  .catalog-image img{ width:100%; height:100%; object-fit:cover; }
  #productGrid .catalog-specs{ list-style:none; margin:0; padding:0; }
  #productGrid .catalog-specs .spec-row{ overflow-wrap:anywhere; }
  #productGrid .card-price{ flex-wrap:wrap; }
  #productGrid .card-actions .btn{ flex:1; justify-content:center; }
  #productGrid .card-actions .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .catalog-state{
    grid-column:1/-1; padding:38px 24px; text-align:center;
    border:1px solid var(--line); border-radius:14px;
    background:var(--paper-raise); color:var(--ink-soft);
  }
  .catalog-state p{ margin:0; }
  .catalog-state .btn{ margin-top:16px; }

  /* ---------- PACKAGES ---------- */
  .pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .pkg-card{
    background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; display:flex; flex-direction:column; gap:16px; position:relative;
  }
  .pkg-card.featured{ border-color:var(--gold); }
  .pkg-badge{
    position:absolute; top:-11px; right:22px; background:var(--gold); color:var(--navy);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--radius);
  }
  .pkg-size{ font-family:var(--display); font-size:30px; font-weight:600; color:var(--navy); }
  .pkg-for{ font-size:14px; color:var(--ink-soft); }
  .pkg-list{ list-style:none; margin:0; padding:0; font-size:13.5px; display:flex; flex-direction:column; gap:8px; }
  .pkg-list li{ padding-left:16px; position:relative; }
  .pkg-list li::before{ content:'—'; position:absolute; left:0; color:var(--sky); }
  .pkg-price{ border-top:1px solid var(--line); padding-top:14px; margin-top:auto; }
  .pkg-price .amt{ font-family:var(--display); font-size:22px; font-weight:600; color:var(--navy); }
  .pkg-price .note{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); display:block; margin-top:2px; }
  #pkgGrid .pkg-card{ min-width:0; }
  #pkgGrid .pkg-size,#pkgGrid .pkg-for,#pkgGrid .pkg-list{ overflow-wrap:anywhere; }
  #pkgGrid .btn:disabled{ opacity:.6; cursor:not-allowed; }

  /* ---------- SERVICES ---------- */
  .service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .svc-card{
    border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--paper-raise);
    display:flex; flex-direction:column; gap:12px;
  }
  .svc-card h3{ font-size:16px; }
  .svc-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; flex-grow:1; }

  /* ---------- HOW IT WORKS ---------- */
  .steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
  .steps::before{
    content:''; position:absolute; top:19px; left:0; right:0; height:1px; background:var(--line-dark);
  }
  .step{ padding-right:18px; position:relative; }
  .step-num{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
    font-family:var(--mono); font-size:13px; display:flex; align-items:center; justify-content:center;
    background:var(--navy); position:relative; z-index:1; margin-bottom:16px;
  }
  .step h3{ font-size:15.5px; color:var(--paper); margin-bottom:6px; }
  .step p{ font-size:13px; color:#AEBDC5; margin:0; }

  /* ---------- CONSULTATION + FORM ---------- */
  .consult-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
  .consult-copy p{ color:var(--ink-soft); font-size:15px; margin-top:14px; }
  .consult-points{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px; }
  .consult-points li{ display:flex; gap:12px; font-size:14px; align-items:flex-start; }
  .consult-points .dot{ width:6px; height:6px; background:var(--gold); margin-top:7px; flex-shrink:0; border-radius:1px; }

  form{ background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .field.full{ grid-column:1/-1; }
  .field label{
    font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);
  }
  .field label .req{ color:var(--gold-deep); }
  .field input, .field select, .field textarea{
    font-family:var(--body); font-size:14.5px; padding:11px 12px; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--paper); color:var(--ink); width:100%;
  }
  .field textarea{ resize:vertical; min-height:80px; }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
  .chip-row{ margin-bottom:16px; }
  .chip{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
    background:var(--paper); border:1px solid var(--line); padding:7px 12px; border-radius:var(--radius); color:var(--ink-soft);
  }
  .chip button{ background:none; border:none; color:var(--ink-soft); font-size:14px; line-height:1; padding:0; }
  .form-foot{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:10px; }
  .form-msg{ font-family:var(--mono); font-size:12.5px; padding:10px 12px; border-radius:var(--radius); margin-bottom:14px; display:none; }
  .form-msg.show{ display:block; }
  .form-msg.ok{ background:#EAF2E9; color:var(--moss); border:1px solid #C8DCC4; }
  .form-msg.err{ background:#FBEAEA; color:#A13B3B; border:1px solid #EFC6C6; }

  /* ---------- REQUESTS PANEL ---------- */
  .req-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
  .req-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
  .req-row{
    display:grid; grid-template-columns:110px 1fr 150px 110px; gap:16px; align-items:center;
    padding:15px 0; border-bottom:1px solid var(--line); font-size:13.5px;
  }
  .req-type{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--sky); }
  .req-name{ font-weight:500; }
  .req-name span{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-top:2px; }
  .req-date{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
  .req-status{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em;
    color:var(--moss); background:#EAF2E9; padding:5px 10px; border-radius:var(--radius); text-align:center; width:fit-content;
  }
  .req-empty{ padding:34px 0; text-align:center; color:var(--ink-soft); font-size:14px; border-bottom:1px solid var(--line); }
  .req-empty small{ display:block; font-family:var(--mono); font-size:11.5px; margin-top:6px; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--navy); color:#AEBDC5; padding:52px 0 26px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-dark); }
  .footer-brand p{ font-size:13.5px; margin-top:12px; max-width:32ch; }
  .footer-col h4{
    font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#7FA0AF; margin-bottom:14px;
  }
  .footer-col a, .footer-col p{ display:block; font-size:13.5px; text-decoration:none; color:#AEBDC5; margin-bottom:9px; }
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:22px; font-family:var(--mono); font-size:11.5px; color:#6E8996; flex-wrap:wrap; gap:10px;
  }

  /* ---------- MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(14,42,63,.55); backdrop-filter:blur(2px);
    display:flex; align-items:flex-start; justify-content:center; padding:40px 20px;
    z-index:100; opacity:0; pointer-events:none; transition:opacity .18s ease;
    overflow-y:auto;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--paper); border-radius:var(--radius); max-width:640px; width:100%;
    padding:0; transform:translateY(12px); transition:transform .18s ease;
  }
  .modal-overlay.open .modal{ transform:translateY(0); }
  .modal-head{
    display:flex; justify-content:space-between; align-items:center; padding:22px 26px;
    border-bottom:1px solid var(--line); background:var(--paper-raise);
  }
  .modal-head h3{ font-size:19px; }
  .modal-close{ background:none; border:1px solid var(--line); width:32px; height:32px; border-radius:var(--radius); font-size:16px; color:var(--ink-soft); }
  .modal-body{ padding:24px 26px; }
  .modal form{ border:none; padding:0; }

  /* ---------- TOAST ---------- */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translate(-50%,140%);
    background:var(--navy); color:var(--paper); font-family:var(--mono); font-size:13px;
    padding:14px 22px; border-radius:var(--radius); border:1px solid var(--gold);
    z-index:200; transition:transform .25s ease; max-width:90vw; text-align:center;
  }
  .toast.show{ transform:translate(-50%,0); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .hero-grid{ grid-template-columns:1fr; }
    .panel-art{ max-width:420px; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .pkg-grid{ grid-template-columns:1fr; }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .trust-row{ grid-template-columns:repeat(2,1fr); row-gap:20px; }
    .trust-item:nth-child(3){ border-left:none; }
    .steps{ grid-template-columns:1fr; gap:26px; }
    .steps::before{ display:none; }
    .consult-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:720px){
    nav.nav-links{
      position:fixed; top:65px; left:0; right:0; bottom:0; background:var(--navy);
      flex-direction:column; padding:26px 28px; gap:4px; transform:translateX(100%);
      transition:transform .2s ease; z-index:59;
    }
    nav.nav-links.open{ transform:translateX(0); }
    nav.nav-links a{ padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:15px; }
    .nav-toggle{ display:flex; }
    .hero-actions .btn-outline{ display:none; }
    .product-grid, .service-grid{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
    .req-row{ grid-template-columns:1fr; gap:6px; }
    .req-row .req-date{ order:3; }
    .footer-grid{ grid-template-columns:1fr; }
  }

  /* Bharat Enviro-inspired visual system, adapted for the Suryagrid brand. */
  :root{
    --blue:#1e5a8e;
    --blue-dark:#0c2d4a;
    --blue-mid:#143f66;
    --blue-light:#2a78b8;
    --blue-soft:#eaf3fb;
    --green:#7cb928;
    --green-dark:#68a020;
    --green-light:#a4d63a;
    --green-soft:#f0f9e8;
    --slate-50:#f8fafc;
    --slate-100:#f1f5f9;
    --slate-200:#e2e8f0;
    --slate-500:#64748b;
    --slate-600:#475569;
    --slate-700:#334155;
    --slate-900:#0f172a;
    --ink:var(--slate-900);
    --ink-soft:var(--slate-600);
    --paper:#fff;
    --paper-raise:#fff;
    --navy:var(--blue-dark);
    --navy-2:var(--blue-mid);
    --navy-3:var(--blue);
    --gold:var(--green);
    --gold-deep:var(--green-dark);
    --sky:var(--blue);
    --moss:var(--green-dark);
    --line:var(--slate-200);
    --line-dark:rgba(255,255,255,.12);
    --radius:12px;
    --display:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --maxw:1180px;
  }

  body{ background:#fff; font-family:var(--body); color:var(--slate-900); }
  .wrap{ max-width:var(--maxw); padding:0 24px; }
  h1,h2,h3{ font-family:var(--display); }
  :focus-visible{ outline:3px solid rgba(124,185,40,.45); outline-offset:3px; }

  .top-bar{ background:var(--blue-dark); color:#fff; font-size:12.5px; }
  .top-row{ min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .top-contact{ display:flex; align-items:center; gap:14px; }
  .top-contact a{ color:#fff; text-decoration:none; }
  .top-contact a:hover{ color:var(--green-light); }
  .top-sep{ opacity:.35; }
  .top-note{ color:#cbd5e1; }

  .btn{
    min-height:42px;
    padding:11px 20px;
    border-radius:8px;
    font-family:var(--body);
    font-size:13px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    justify-content:center;
    box-shadow:none;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-gold{ background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 6px 16px rgba(124,185,40,.18); }
  .btn-gold:hover{ background:var(--green-dark); border-color:var(--green-dark); }
  .btn-outline{ border-color:var(--blue); color:var(--blue); background:transparent; }
  .btn-outline:hover{ background:var(--blue); color:#fff; }
  .btn-ink{ border-color:var(--blue); color:var(--blue); background:#fff; }
  .btn-ink:hover{ background:var(--blue); color:#fff; }
  .btn-sm{ min-height:38px; padding:8px 16px; font-size:12.5px; }

  header.site-nav{
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--slate-200);
    box-shadow:0 4px 18px rgba(15,23,42,.06);
    backdrop-filter:blur(12px);
  }
  .nav-row{ min-height:76px; padding:10px 24px; }
  .brand{ gap:11px; font-family:var(--display); color:var(--slate-900); }
  .brand-mark{
    width:48px;
    height:48px;
    flex:0 0 48px;
    position:relative;
    overflow:hidden;
    clip-path:none;
    border-radius:50%;
    border:4px solid #fff;
    background:linear-gradient(150deg,#b9e4ff 0 38%,var(--green-light) 39% 55%,var(--blue) 56% 100%);
    box-shadow:0 0 0 1px var(--slate-200),0 5px 14px rgba(30,90,142,.18);
  }
  .brand-mark::before{
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    background:#f6c84c;
    top:8px;
    right:7px;
    box-shadow:0 0 0 5px rgba(246,200,76,.2);
  }
  .brand-mark::after{
    content:'';
    position:absolute;
    left:7px;
    right:7px;
    bottom:8px;
    height:10px;
    border:1px solid rgba(255,255,255,.65);
    transform:skewX(-18deg);
    background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.45) 7px 8px),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.35) 4px 5px);
  }
  .brand-mark.company-website-logo--image{
    background:#fff;
    border-radius:50%;
    overflow:hidden;
  }
  .brand-mark.company-website-logo--image::before,
  .brand-mark.company-website-logo--image::after{ display:none; }
  .brand-mark.company-website-logo--image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
  .brand-line-1{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
  .brand-line-2{ margin-top:4px; color:var(--slate-500); font-size:9px; font-weight:600; letter-spacing:.17em; }
  .text-blue{ color:var(--blue); }
  .text-green{ color:var(--green); }
  nav.nav-links{ gap:4px; }
  nav.nav-links a{
    padding:9px 13px;
    border:0;
    border-radius:7px;
    color:var(--slate-700);
    font-family:var(--body);
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
  }
  nav.nav-links a:hover{ color:var(--blue); border:0; background:var(--slate-50); }
  .nav-toggle{ border-color:var(--slate-200); color:var(--blue-dark); background:#fff; border-radius:8px; }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ background:var(--blue-dark); }

  .hero{
    padding:76px 0 70px;
    color:var(--slate-900);
    background:linear-gradient(135deg,var(--blue-soft) 0%,#fff 50%,var(--green-soft) 100%);
  }
  .hero::before,.hero::after{ content:''; position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(70px); pointer-events:none; }
  .hero::before{ top:-220px; right:-140px; background:rgba(124,185,40,.17); }
  .hero::after{ bottom:-300px; left:-160px; background:rgba(30,90,142,.12); }
  .hero-grid{ position:relative; z-index:1; padding:0 24px; gap:58px; grid-template-columns:1.03fr .97fr; }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    padding:7px 14px;
    border:1px solid rgba(124,185,40,.3);
    border-radius:999px;
    background:rgba(255,255,255,.85);
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  .hero-badge::before{ content:'✦'; color:var(--green); }
  .hero h1{ max-width:13ch; color:var(--slate-900); font-size:clamp(38px,4.8vw,56px); font-weight:800; line-height:1.05; letter-spacing:-.035em; }
  .hero h1 em{ color:var(--green); }
  .hero p.lede{ margin:20px 0 28px; color:var(--slate-600); font-size:16px; line-height:1.7; }
  .hero-actions{ gap:10px; }
  .hero-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; color:var(--slate-600); font-family:var(--body); font-size:11.5px; }
  .hero-meta span{ padding:13px 14px; border:1px solid var(--slate-200); border-radius:12px; background:rgba(255,255,255,.72); }
  .hero-meta b{ display:block; color:var(--blue); font-size:18px; font-weight:800; line-height:1.1; margin-bottom:3px; }
  .hero-image-wrap{ position:relative; padding:18px 0 18px 18px; }
  .hero-image{ width:100%; height:460px; object-fit:cover; border-radius:18px; box-shadow:0 24px 55px rgba(15,23,42,.18); }
  .floating-card{ position:absolute; z-index:2; display:flex; align-items:center; gap:11px; padding:13px 15px; border:1px solid var(--slate-200); border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(15,23,42,.13); }
  .floating-card.top-card{ top:0; right:-12px; }
  .floating-card.bottom-card{ left:0; bottom:0; }
  .fc-icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--green-soft); color:var(--green-dark); font-size:19px; font-weight:800; }
  .fc-icon.blue{ background:var(--blue-soft); color:var(--blue); }
  .fc-sm{ display:block; color:var(--slate-500); font-size:11px; }
  .fc-lg{ display:block; color:var(--slate-900); font-size:13px; font-weight:700; }

  .trust-strip{ background:#fff; border-bottom:1px solid var(--slate-200); }
  .trust-row{ padding:25px 24px; }
  .trust-item{ border-left-color:var(--slate-200); text-align:center; }
  .trust-num{ color:var(--blue); font-size:25px; font-weight:800; }
  .trust-label{ color:var(--slate-600); font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.04em; }
  .demo-note{ padding:13px 24px; text-align:center; color:var(--slate-500); font-family:var(--body); font-size:11px; background:var(--slate-50); }

  section{ padding:80px 0; }
  #packages,#requests{ background:var(--slate-50)!important; }
  .section-head{ max-width:690px; margin-bottom:42px; }
  .section-head h2,.consult-copy h2{ color:var(--slate-900); font-size:clamp(30px,3.2vw,42px); font-weight:800; line-height:1.15; letter-spacing:-.025em; }
  .section-head p{ color:var(--slate-600); font-size:15px; line-height:1.7; }
  .eyebrow{ display:inline-block; color:var(--green); font-family:var(--body); font-size:12px; font-weight:800; letter-spacing:.15em; }
  .eyebrow::before{ display:none; }

  .product-grid,.pkg-grid{ gap:22px; }
  .card,.pkg-card,.svc-card{
    border:1px solid var(--slate-200);
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.035);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  }
  .card:hover,.pkg-card:hover,.svc-card:hover{ transform:translateY(-4px); border-color:rgba(124,185,40,.48); box-shadow:0 18px 38px rgba(15,23,42,.09); }
  .card{ padding:22px; gap:15px; }
  .card-icon{ width:100%; height:126px; border:0; border-radius:10px; color:var(--blue); background:linear-gradient(135deg,var(--blue-soft),var(--green-soft)); }
  .card-icon svg{ width:42px; height:42px; padding:8px; border-radius:50%; background:#fff; box-shadow:0 5px 14px rgba(15,23,42,.1); }
  .card h3{ color:var(--slate-900); font-size:17px; font-weight:800; }
  .card .tag{ color:var(--green-dark); font-family:var(--body); font-size:10.5px; font-weight:700; letter-spacing:.04em; }
  .spec-table{ border-top-color:var(--slate-100); font-family:var(--body); font-size:12px; }
  .spec-row{ border-bottom-color:var(--slate-100); color:var(--slate-600); }
  .spec-row b{ color:var(--slate-900); font-weight:700; }
  .card-price .amt{ color:var(--blue); font-size:21px; font-weight:800; }
  .card-price .unit{ color:var(--slate-500); font-family:var(--body); }

  .pkg-card{ padding:28px; gap:17px; }
  .pkg-card.featured{ border:2px solid var(--green); box-shadow:0 18px 40px rgba(124,185,40,.13); }
  .pkg-badge{ top:-12px; right:20px; border-radius:999px; background:var(--green); color:#fff; font-family:var(--body); font-weight:800; }
  .pkg-size{ color:var(--blue); font-size:31px; font-weight:800; }
  .pkg-for{ color:var(--slate-600); line-height:1.6; }
  .pkg-list{ color:var(--slate-700); gap:10px; }
  .pkg-list li{ padding-left:22px; }
  .pkg-list li::before{ content:'✓'; color:var(--green); font-weight:800; }
  .pkg-price{ border-top-color:var(--slate-100); }
  .pkg-price .amt{ color:var(--blue); font-weight:800; }
  .pkg-price .note{ color:var(--slate-500); font-family:var(--body); }

  .service-grid{ gap:20px; }
  .svc-card{ padding:24px; gap:13px; }
  .svc-card .card-icon{ width:54px; height:54px; border-radius:13px; background:var(--blue-soft); }
  .svc-card .card-icon svg{ width:25px; height:25px; padding:0; border-radius:0; background:none; box-shadow:none; }
  .svc-card h3{ color:var(--slate-900); font-size:16px; font-weight:800; }
  .svc-card p{ color:var(--slate-600); line-height:1.65; }

  .band-dark{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid)); }
  .band-dark::before,.band-dark::after{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(70px); pointer-events:none; }
  .band-dark::before{ top:-220px; right:-100px; background:rgba(124,185,40,.18); }
  .band-dark::after{ bottom:-260px; left:-120px; background:rgba(42,120,184,.16); }
  .band-dark .wrap{ position:relative; z-index:1; }
  .band-dark .section-head h2{ color:#fff; }
  .band-dark .eyebrow{ color:var(--green-light); }
  .steps::before{ background:rgba(255,255,255,.15); }
  .step-num{ border:0; background:var(--green); color:#fff; font-weight:800; box-shadow:0 0 0 6px rgba(124,185,40,.12); }
  .step h3{ color:#fff; font-weight:800; }
  .step p{ color:#cbd5e1; line-height:1.6; }

  .consult-grid{ gap:64px; }
  .consult-copy p{ color:var(--slate-600); line-height:1.7; }
  .consult-points{ gap:12px; }
  .consult-points li{ color:var(--slate-700); font-weight:600; }
  .consult-points .dot{ width:28px; height:28px; margin-top:0; display:grid; place-items:center; border-radius:8px; background:var(--green-soft); color:var(--green); }
  .consult-points .dot::before{ content:'✓'; font-size:14px; font-weight:800; }
  form{ padding:30px; border:1px solid var(--slate-200); border-radius:14px; background:#fff; box-shadow:0 12px 34px rgba(15,23,42,.07); }
  .field label{ color:var(--slate-700); font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; }
  .field label .req{ color:var(--green-dark); }
  .field input,.field select,.field textarea{ padding:11px 13px; border-color:var(--slate-200); border-radius:8px; background:#fff; color:var(--slate-900); }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,90,142,.12); }
  .form-foot{ color:var(--slate-500); font-family:var(--body); }
  .form-msg{ border-radius:8px; font-family:var(--body); }
  .form-msg.ok{ color:#477d18; background:var(--green-soft); border-color:#cfe6b7; }
  .chip{ border-color:var(--slate-200); border-radius:8px; background:var(--slate-50); font-family:var(--body); }

  .req-list{ border-top-color:var(--slate-200); }
  .req-row{ border-bottom-color:var(--slate-200); }
  .req-type{ color:var(--green-dark); font-family:var(--body); font-weight:800; }
  .req-name span,.req-date{ color:var(--slate-500); font-family:var(--body); }
  .req-status{ border-radius:999px; color:var(--green-dark); background:var(--green-soft); font-family:var(--body); font-weight:800; }

  footer{ padding:54px 0 25px; background:var(--blue-dark); color:#cbd5e1; }
  .footer-grid{ border-bottom-color:rgba(255,255,255,.1); }
  .footer-brand-tile{ display:inline-flex; padding:9px 12px; border-radius:10px; background:#fff; }
  .footer-brand .brand{ color:var(--slate-900); }
  .footer-brand p{ color:#94a3b8; line-height:1.65; }
  .footer-col h4{ color:#fff; font-family:var(--body); font-size:14px; font-weight:800; letter-spacing:0; text-transform:none; }
  .footer-col a,.footer-col p{ color:#cbd5e1; }
  .footer-col a:hover{ color:var(--green-light); }
  .footer-bottom{ border-top:0; color:#94a3b8; font-family:var(--body); }

  .modal-overlay{ background:rgba(12,45,74,.65); backdrop-filter:blur(5px); }
  .modal{ border-radius:16px; background:#fff; box-shadow:0 30px 80px rgba(12,45,74,.3); }
  .modal-head{ border-bottom-color:var(--slate-200); background:var(--slate-50); }
  .modal-head h3{ color:var(--slate-900); font-weight:800; }
  .modal-close{ border-color:var(--slate-200); border-radius:8px; background:#fff; }
  .toast{ border:0; border-left:4px solid var(--green); border-radius:10px; background:#fff; color:var(--slate-900); box-shadow:0 16px 40px rgba(15,23,42,.2); font-family:var(--body); font-weight:700; }

  @media (max-width:960px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-image-wrap{ max-width:620px; padding-left:0; }
    .hero-image{ height:390px; }
  }
  @media (max-width:720px){
    .top-bar{ display:none; }
    header.site-nav{ backdrop-filter:none; }
    .nav-row{ min-height:70px; }
    .brand-mark{ width:42px; height:42px; flex-basis:42px; }
    .brand-line-1{ font-size:14px; }
    .brand-line-2{ font-size:8px; }
    nav.nav-links{
      top:70px;
      bottom:auto;
      height:calc(100dvh - 70px);
      min-height:calc(100vh - 70px);
      padding:22px 24px;
      overflow-y:auto;
      background-color:var(--green-dark);
      background-image:linear-gradient(160deg,var(--green),var(--green-dark));
      box-shadow:0 20px 35px rgba(51,91,15,.28);
    }
    nav.nav-links a{ padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.24); color:#fff; font-size:14px; }
    nav.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.16); }
    .nav-cta>.btn{ display:none; }
    .hero{ padding:54px 0; }
    .hero-meta{ grid-template-columns:1fr; }
    .hero-meta span{ display:flex; align-items:center; gap:8px; }
    .hero-meta b{ margin:0; min-width:66px; }
    .hero-image{ height:330px; }
    .floating-card{ display:none; }
    .trust-row{ grid-template-columns:1fr 1fr; }
    .trust-item{ padding:12px 8px; }
    section{ padding:62px 0; }
  }
  @media (max-width:440px){
    .brand-line-2{ display:none; }
    .hero-actions .btn{ width:100%; }
    .hero-image{ height:270px; }
  }