/* ============================================================
   UFO HYPERNET SOLUTIONS LIMITED — Site Stylesheet v2
   "Simple and beautiful, with depth."
   Display: Hubot Sans (hero only) · Body/Headings: Mona Sans
   ============================================================ */

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/mona-sans:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Hubot Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/hubot-sans:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
}

:root{
  /* brand */
  --ink:      #1E1E1E;
  --paper:    #FFFFFF;
  --cloud:    #FAFAF8;
  --line:     rgba(30,30,30,.09);
  --line-2:   rgba(30,30,30,.14);

  --azure:    #4287F5;
  --aqua:     #10E2AE;
  --pumpkin:  #F57C35;
  --amber:    #FFB724;

  --ink-60:   rgba(30,30,30,.62);
  --ink-40:   rgba(30,30,30,.42);
  --paper-70: rgba(255,255,255,.72);
  --paper-45: rgba(255,255,255,.46);
  --paper-12: rgba(255,255,255,.12);

  --accent: var(--aqua);

  --f-display: 'Hubot Sans', 'Mona Sans', system-ui, sans-serif;
  --f-body:    'Mona Sans', system-ui, sans-serif;

  --maxw: 1180px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;

  --ease: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0; font-family: var(--f-body); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; font-size: 16px;
}
h1,h2,h3,h4{ margin:0; font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); }
p{ margin:0; color: var(--ink-60); line-height: 1.68; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; }
ul{ margin:0; padding:0; list-style:none; }
svg{ display:block; }

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 clamp(22px,5vw,60px); }
.visually-hidden:not(:focus){ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- type helpers ---------- */
.display{
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: .96;
}
.h1{ font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
.h2{ font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 620; letter-spacing:-0.02em; }
.h3{ font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 620; }
.lede{ font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--ink-60); line-height:1.6; max-width: 46ch; }
.eyebrow{
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing:.13em;
  color: var(--ink-40); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow i{ width:16px; height:1.5px; background: var(--accent); display:inline-block; }
.on-ink .eyebrow{ color: var(--paper-45); }
.on-ink .eyebrow i{ background: var(--aqua); }

.section-head{ max-width: 640px; margin-bottom: clamp(2.6rem,5vw,4rem); }
.section-head .eyebrow{ margin-bottom: 1.1rem; }
.section-head p{ margin-top: 1rem; }

.section{ padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.section-tight{ padding-block: clamp(2.4rem, 4vw, 3.4rem); }
.on-ink{ background: var(--ink); color: var(--paper); }
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{ color: var(--paper); }
.on-ink p{ color: var(--paper-70); }
.on-cloud{ background: var(--cloud); }

hr.hair{ border:none; height:1px; background: var(--line); margin:0; }
.on-ink hr.hair{ background: var(--paper-12); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:.94rem;
  padding: .95rem 1.6rem; border-radius: 999px; cursor:pointer;
  transition: transform .4s var(--ease), background .25s ease, color .25s ease, box-shadow .4s var(--ease), border-color .25s ease;
  border: 1.5px solid transparent;
}
.btn:hover{ transform: translateY(-2px); }
.btn-arrow{ transition: transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.btn-ink{ background: var(--ink); color: var(--paper); }
.btn-ink:hover{ box-shadow: 0 16px 32px -14px rgba(30,30,30,.45); }

.btn-line{ background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-line:hover{ border-color: var(--ink); }

.btn-line-light{ background: transparent; border-color: var(--paper-45); color: var(--paper); }
.btn-line-light:hover{ border-color: var(--paper); }

.btn-accent{ background: var(--aqua); color: var(--ink); }
.btn-accent:hover{ box-shadow: 0 16px 32px -14px rgba(16,226,174,.5); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:100; background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height: 84px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 26px; width:auto; }
.site-header .brand img{ height: 42px; }
.brand span{ font-weight: 700; font-size: 15.5px; letter-spacing:-.01em; }

.nav-links{ display:flex; align-items:center; gap: 40px; }
.nav-links a{ font-size: 14px; font-weight: 560; color: var(--ink-60); position:relative; padding: 4px 0; transition: color .25s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background: var(--ink); transition: width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:20px; }
.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition: all .3s var(--ease);
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: rotate(45deg); top:0; }
.nav-toggle[aria-expanded="true"] span::after{ transform: rotate(-45deg); top:0; }

@media (max-width: 860px){
  .site-header{ backdrop-filter: none; }
  .nav-links{
    position: fixed; top: 84px; right: 0; left: 0; bottom: auto; z-index: 101; background: var(--paper);
    box-shadow: 0 18px 30px -24px rgba(30,30,30,.35);
    flex-direction: column; align-items:flex-start; padding: 32px clamp(22px,5vw,60px) 18px; gap: 22px;
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .35s var(--ease);
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ font-size: 21px; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn-desktop{ display:none; }
}

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--paper); padding: 5rem 0 1.8rem; }
.footer-top{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.6rem; padding-bottom: 2.8rem; border-bottom: 1px solid var(--paper-12); }
.footer-brand .brand span{ color: var(--paper); }
.footer-brand p{ margin-top: 1.1rem; max-width: 280px; font-size:.92rem; }
.footer-col h5{ font-size: 11.5px; text-transform:uppercase; letter-spacing:.12em; color: var(--paper-45); margin-bottom: 1.1rem; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ color: var(--paper-70); font-size:.92rem; transition: color .2s ease; }
.footer-col a:hover{ color: var(--aqua); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.9rem; padding-top:1.6rem; font-size:.8rem; color: var(--paper-45); }
.social-row{ display:flex; gap:10px; margin-top: 1.2rem; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--paper-12); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); }
.social-row a svg{ width:15px; height:15px; }
.social-row a:hover{ background: var(--aqua); border-color: var(--aqua); transform: translateY(-2px); }
@media (max-width: 780px){ .footer-top{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width: 400px){ .footer-top{ grid-template-columns: 1fr; } .footer-brand{ grid-column:auto; } }

/* ---------- hero (3D) ---------- */
.hero{
  position: relative; background: var(--ink); color: var(--paper); overflow:hidden;
  padding: clamp(42px,6vw,68px) 0 clamp(38px,5vw,58px);
}
.hero-grid{ display:grid; grid-template-columns: 1.35fr .65fr; gap: clamp(20px,4vw,40px); align-items:center; min-height: 0; }
.hero-copy{ position:relative; z-index:2; }
.hero-copy .display{ font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 640; letter-spacing:-0.02em; line-height:1.12; }
.hero-copy .display{ margin: 1.2rem 0 1.6rem; }
.hero-copy .lede{ margin-bottom: 2.2rem; color: var(--paper-70); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stage{ position:relative; height: clamp(260px, 27vw, 360px); z-index:1; }
.hero-stage canvas{ width:100% !important; height:100% !important; display:block; touch-action: pan-y; }

@media (max-width: 900px){
  .hero{ padding-block: 36px 42px; }
  .hero-grid{ grid-template-columns: minmax(0, 1.2fr) minmax(150px, .8fr); gap: 16px; min-height: 390px; }
  .hero-stage{ height: 300px; }
  .hero-copy .display{ font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
  .hero-copy .lede{ font-size: 1rem; margin-bottom: 1.6rem; }
}

@media (max-width: 560px){
  .hero{ padding-block: 28px 32px; }
  .hero-grid{ grid-template-columns: minmax(0, 1.28fr) minmax(92px, .72fr); gap: 10px; min-height: 0; }
  .hero-stage{ height: 250px; }
  .hero-copy .display{ font-size: clamp(2rem, 9vw, 2.6rem); margin: .8rem 0 1rem; }
  .hero-copy .lede{ font-size: .88rem; line-height: 1.5; margin-bottom: 1.2rem; }
  .hero-cta{ gap: 8px; }
  .hero-cta .btn{ padding: .72rem .9rem; font-size: .8rem; }
}

/* subpage (smaller) hero with corner 3D accent */
.subhero{ position:relative; background: var(--ink); color: var(--paper); overflow:hidden; padding: clamp(64px,10vw,100px) 0 clamp(52px,7vw,76px); }
.subhero-inner{ position:relative; z-index:2; max-width: 620px; }
.subhero .eyebrow{ margin-bottom: 1.2rem; }
.subhero .h1{ font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 640; letter-spacing:-0.02em; margin-bottom: 1.1rem; }
.subhero .lede{ color: var(--paper-70); }
.subhero-stage{ position:absolute; top:0; right:0; width: min(46vw, 560px); height:100%; z-index:1; opacity:.9; }
.subhero-stage canvas{ width:100% !important; height:100% !important; }
@media (max-width: 760px){ .subhero-stage{ width: 70vw; opacity:.5; } }

/* ---------- simple statement row (replaces heavy problem/solution card) ---------- */
.statement{ max-width: 900px; }
.statement .h2{ font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 560; line-height: 1.35; }
.statement .accent{ color: var(--accent); font-weight: 650; }
.statement-meta{ display:flex; gap: 2.5rem; margin-top: 2.6rem; flex-wrap:wrap; }
.statement-meta div{ padding-top: 1rem; border-top: 1px solid var(--line); min-width: 160px; }
.statement-meta b{ display:block; font-size: 1.9rem; font-weight: 700; margin-bottom:.3rem; }
.statement-meta span{ font-size: .85rem; color: var(--ink-40); }

/* ---------- tilt cards ---------- */
.tilt-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; }
.tilt-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.tilt-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 980px){ .tilt-grid, .tilt-grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .tilt-grid, .tilt-grid.cols-3, .tilt-grid.cols-2{ grid-template-columns: 1fr; } }

.tilt-card{
  --rx: 0deg; --ry: 0deg;
  position: relative; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 1.9rem 1.6rem;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .3s ease;
  will-change: transform;
}
.tilt-card:hover{ box-shadow: 0 30px 60px -32px rgba(30,30,30,.28); border-color: transparent; }
.tilt-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 60%);
  opacity:0; transition: opacity .4s ease;
}
.tilt-card:hover::before{ opacity:1; }
.on-ink .tilt-card{ background:#242424; border-color: var(--paper-12); }
.on-ink .tilt-card:hover{ box-shadow: 0 30px 60px -32px rgba(0,0,0,.5); }

.service-catalog .tilt-card{
  --service-y:22px;
  opacity:0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--service-y));
  transition: opacity .65s var(--ease-soft), transform .65s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .3s ease;
}
.service-catalog.in .tilt-card{ --service-y:0px; opacity:1; }
.service-catalog.in .tilt-card:nth-child(2){ transition-delay:.06s; }
.service-catalog.in .tilt-card:nth-child(3){ transition-delay:.12s; }
.service-catalog.in .tilt-card:nth-child(4){ transition-delay:.18s; }
.service-catalog.in .tilt-card:nth-child(5){ transition-delay:.24s; }
.service-catalog.in .tilt-card:nth-child(6){ transition-delay:.30s; }
.service-catalog.in .tilt-card:nth-child(7){ transition-delay:.36s; }
.service-catalog.in .tilt-card:nth-child(8){ transition-delay:.42s; }

.tilt-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.tilt-icon svg{ width:21px; height:21px; }
.tilt-card h3{ font-size: 1.08rem; margin-bottom:.5rem; }
.tilt-card p{ font-size: .92rem; }

.ic-aqua{ background: rgba(16,226,174,.13); color:#0a8f6f; }
.ic-azure{ background: rgba(66,135,245,.12); color:#2f66c9; }
.ic-pumpkin{ background: rgba(245,124,53,.12); color:#c65e1e; }
.ic-amber{ background: rgba(255,183,36,.17); color:#a97207; }

/* ---------- process (real sequence — numbers justified) ---------- */
.process{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns: 64px 1fr; gap: 1.8rem; padding: 1.9rem 0; border-top: 1px solid var(--line); }
.on-ink .step{ border-top-color: var(--paper-12); }
.process .step:last-child{ border-bottom:1px solid var(--line); }
.on-ink .process .step:last-child{ border-bottom-color: var(--paper-12); }
.step .num{ font-size: 1rem; font-weight:700; color: var(--ink-40); font-variant-numeric: tabular-nums; }
.on-ink .step .num{ color: var(--paper-45); }
.step h4{ font-size: 1.12rem; margin-bottom:.4rem; font-weight:640; }
.step p{ font-size:.94rem; max-width: 540px; }

.service-process .step{
  opacity:0;
  transform: translateX(-16px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.service-process.in .step{ opacity:1; transform:none; }
.service-process.in .step:nth-child(2){ transition-delay:.08s; }
.service-process.in .step:nth-child(3){ transition-delay:.16s; }
.service-process.in .step:nth-child(4){ transition-delay:.24s; }
.service-process.in .step:nth-child(5){ transition-delay:.32s; }

/* ---------- value list (hairline, no boxes — calmer) ---------- */
.value-row{ padding: 1.7rem 0; border-top: 1px solid var(--line); display:grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
.value-row:last-child{ border-bottom: 1px solid var(--line); }
.value-row h3{ font-size: 1rem; font-weight:650; }
.value-row p{ font-size: .93rem; margin:0; max-width: 620px; }
@media (max-width: 700px){ .value-row{ grid-template-columns: 1fr; gap:.5rem; } }

/* ---------- quote ---------- */
.quote{ border-left: 2px solid var(--accent); padding-left: 1.6rem; }
.quote p{ font-size: clamp(1.1rem,1.8vw,1.35rem); color: var(--ink); font-weight: 560; line-height:1.55; }

/* ---------- impact / vision ---------- */
.impact-row{ display:flex; flex-direction:column; }
.impact-item{ display:grid; grid-template-columns: 1fr 2fr; gap: 1.6rem; padding: 1.8rem 0; border-top:1px solid var(--paper-12); }
.impact-item:last-child{ border-bottom:1px solid var(--paper-12); }
.impact-item h4{ font-size: 1.05rem; font-weight:640; }
.impact-item p{ font-size:.94rem; margin:0; max-width:520px; }
@media (max-width: 700px){ .impact-item{ grid-template-columns: 1fr; gap:.5rem; } }

/* ---------- CTA banner ---------- */
.cta{
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
  padding: clamp(2.4rem,5vw,3.6rem); display:flex; align-items:center; justify-content:space-between;
  gap: 1.8rem; flex-wrap:wrap; position: relative; overflow:hidden;
}
.cta h2{ color: var(--paper); max-width: 480px; font-weight: 580; }
.cta-stage{ position:absolute; top:-20%; right:-6%; width: 320px; height: 320px; opacity:.5; pointer-events:none; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 3.4rem; align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.field{ margin-bottom: 1.3rem; }
.field label{ display:block; font-size:.78rem; font-weight:650; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; color: var(--ink-40); }
.field input, .field textarea{
  width:100%; padding: .95rem 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-2);
  font-family: var(--f-body); font-size:.98rem; background: var(--paper); color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(30,30,30,.06); }
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.8rem; color: var(--ink-40); margin-top: 1rem; }
.form-status{
  display:none; align-items:center; gap:10px; padding: 1rem 1.1rem; background: rgba(16,226,174,.1);
  border: 1px solid rgba(16,226,174,.35); border-radius: var(--r-sm); margin-bottom: 1.2rem; font-size:.92rem; font-weight:600;
}
.form-status.show{ display:flex; }
.form-status svg{ width:18px; height:18px; stroke: var(--aqua); flex:none; }

.contact-card{ background: var(--ink); color: var(--paper); border-radius: var(--r-md); padding: 2.2rem 1.8rem; }
.contact-card h3{ color:var(--paper); font-size:1.05rem; margin-bottom: 1.4rem; }
.contact-line{ display:flex; gap:12px; align-items:flex-start; padding: 1rem 0; border-top:1px solid var(--paper-12); }
.contact-line:first-of-type{ border-top:none; padding-top:0; }
.contact-line svg{ width:18px; height:18px; margin-top:2px; stroke: var(--aqua); flex:none; }
.contact-line .label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--paper-45); margin-bottom:.3rem; }
.contact-line a, .contact-line span{ font-size:.92rem; color: var(--paper-70); }
.contact-line a:hover{ color: var(--paper); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal.in{ opacity:1; transform:none; }

:focus-visible{ outline: 2px solid var(--azure); outline-offset:3px; }