/* ===== Calyx Global — Homepage design system (fresh editorial look) ===== */
:root{
  --ink:#0f2547; --grey:#5a6b82; --cream:#f6f8fc; --paper:#ffffff;
  --navy:#00255F; --deep:#001a44;
  --tech:#2757C4; --tech2:#5E8AE8;
  --infra:#F3962D; --infra2:#F8BC6E;
  --lime:#F3962D;
  --line:#e5e9f3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.12;font-weight:700;color:var(--ink)}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.hwrap{max-width:1200px;margin:0 auto;padding:0 36px}
@media(max-width:700px){.hwrap{padding:0 22px}}
.arw{display:inline-block;transition:transform .3s}

/* gradient words */
.grad-tech{font-style:normal;background:linear-gradient(100deg,var(--tech),var(--tech2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-infra{font-style:normal;background:linear-gradient(100deg,var(--infra),var(--infra2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-mix{background:linear-gradient(100deg,var(--tech) 0%,var(--infra) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.hbtn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:50px;font-weight:600;font-size:14.5px;transition:.3s;border:1.5px solid transparent}
.hbtn:hover .arw{transform:translateX(4px)}
.hbtn-dark{background:var(--deep);color:#fff}
.hbtn-dark:hover{background:var(--navy);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(29,37,52,.45)}
.hbtn-line{border-color:var(--ink);color:var(--ink)}
.hbtn-line:hover{background:var(--ink);color:#fff}
.hbtn-light{border-color:var(--ink);color:var(--ink)}
.hbtn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== NAV ===== */
.hnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hnav .hwrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:72px}
.hbrand{flex:none}
.hbrand img{height:34px;display:block}
.hlinks{display:flex;gap:22px;align-items:center;flex-wrap:nowrap}
.hlinks a{font-size:14px;font-weight:500;color:var(--ink);transition:.2s}
.hlinks a:hover{color:var(--tech)}.hcta{display:inline-flex;align-items:center;white-space:nowrap;gap:8px;padding:10px 20px;border-radius:50px;color:#fff !important;font-weight:700;
  background:var(--ink);transition:.3s}
.hcta:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(28,39,52,.6)}
.hburger{display:none;font-size:25px;background:none;border:none;color:var(--ink);cursor:pointer}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:110px 0 90px}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.hero-orb.o1{width:520px;height:520px;top:-180px;right:-120px;background:radial-gradient(circle,#dbe4ff,transparent 66%);animation:orbA 18s ease-in-out infinite}
.hero-orb.o2{width:460px;height:460px;bottom:-200px;left:-140px;background:radial-gradient(circle,#ffe4d6,transparent 66%);animation:orbB 22s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-26px)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);padding:8px 18px;border:1px solid var(--line);border-radius:50px;background:#fff;margin-bottom:26px;animation:fadeUp .9s ease both}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(100deg,var(--tech),var(--infra))}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-1.5px;margin-bottom:24px;animation:fadeUp .9s .1s ease both}
.hero-lead{font-size:18px;color:var(--grey);max-width:540px;margin-bottom:34px;animation:fadeUp .9s .2s ease both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .9s .3s ease both}

/* hero art: floating cards */
.hero-art{position:relative;min-height:380px;animation:fadeUp 1s .35s ease both}
.art-ring{position:absolute;top:50%;left:50%;width:330px;height:330px;transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px dashed #ccd4e8;animation:spin 40s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.art-card{position:absolute;width:220px;padding:24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(14,27,42,.25)}
.art-card svg{width:30px;height:30px;fill:none;stroke-width:1.7;margin-bottom:12px}
.art-card b{display:block;font-family:'Sora';font-size:18px;margin-bottom:2px}
.art-card span{font-size:12.5px;color:var(--grey)}
.art-tech{top:8%;left:6%;animation:floatA 6s ease-in-out infinite}
.art-tech svg{stroke:var(--tech)}
.art-infra{bottom:8%;right:2%;animation:floatB 7s .8s ease-in-out infinite}
.art-infra svg{stroke:var(--infra)}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ===== RIBBON ===== */
.ribbon{overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;transform:rotate(-1.2deg) scale(1.02);margin:10px 0;transform-origin:center}
.ribbon-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:marquee 30s linear infinite}
.ribbon-track span{color:var(--ink);font-family:'Sora';font-size:14.5px;font-weight:600;letter-spacing:.06em}
.ribbon-track i{color:var(--infra);font-style:normal;font-size:13px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== SECTIONS ===== */
section{padding:100px 0}
.sec-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:14px;
  background:linear-gradient(100deg,var(--tech),var(--infra));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-1px;margin-bottom:14px}
.sec-head p{color:var(--grey);font-size:17px}
.sec-head-light h2{color:var(--ink)}

/* ===== DIVISION ROWS ===== */
.div-row{display:grid;grid-template-columns:110px 1fr 90px;gap:30px;align-items:center;padding:44px 38px;margin-bottom:22px;
  border-radius:24px;background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .4s}
.div-row:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(110% 130% at 100% 0%, rgba(91,124,250,.10), transparent 55%)}
.div-row-infra:before{background:radial-gradient(110% 130% at 100% 0%, rgba(255,138,92,.12), transparent 55%)}
.div-row:hover{transform:translateY(-6px);box-shadow:0 34px 70px -36px rgba(28,39,52,.3);border-color:#d5dbea}
.div-row:hover:before{opacity:1}
.div-num{font-family:'Sora';font-size:52px;font-weight:800;color:transparent;-webkit-text-stroke:1.5px #c8d0e2}
.div-row:hover .div-num{-webkit-text-stroke:1.5px var(--tech)}
.div-row-infra:hover .div-num{-webkit-text-stroke:1.5px var(--infra)}
.div-body{position:relative}
.div-body h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.5px;margin-bottom:10px}
.div-body p{color:var(--grey);font-size:15.5px;max-width:560px;margin-bottom:18px}
.div-tags{display:flex;gap:10px;flex-wrap:wrap}
.div-tags span{font-size:12.5px;font-weight:600;padding:7px 16px;border-radius:40px;background:var(--cream);border:1px solid var(--line);color:var(--ink)}
.div-go{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;justify-self:end;
  border:1.5px solid var(--ink);font-size:22px;transition:.35s}
.div-row:hover .div-go{background:var(--ink);color:#fff;transform:rotate(-45deg)}

/* ===== IMPACT (soft band) ===== */
.impact{background:linear-gradient(150deg,#eef2ff,#fff4ec);position:relative;overflow:hidden;border-radius:40px;margin:0 20px;border:1px solid var(--line)}
.impact:before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle,#dfe7ff,transparent 70%);top:-200px;right:-140px}
.impact:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.45;
  background:radial-gradient(circle,#ffe6d8,transparent 70%);bottom:-200px;left:-120px}
.impact .hwrap{position:relative;z-index:2}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.imp{padding:34px 28px;border-radius:20px;background:rgba(255,255,255,.75);border:1px solid var(--line);backdrop-filter:blur(8px)}
.imp b{display:block;font-family:'Sora';font-size:44px;font-weight:800;line-height:1;margin-bottom:12px;
  background:linear-gradient(100deg,var(--tech),var(--infra));-webkit-background-clip:text;background-clip:text;color:transparent}
.imp span{font-size:14px;color:var(--grey)}

/* ===== APPROACH ===== */
.approach{position:relative}
.steps-line{height:1.5px;background:linear-gradient(90deg,var(--tech),var(--infra));margin:0 60px 0;opacity:.35;transform:translateY(34px)}
.hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.hstep{position:relative;padding:0 8px;text-align:left}
.hstep i{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;font-style:normal;
  font-family:'Sora';font-weight:700;font-size:20px;color:#fff;margin-bottom:20px;position:relative;z-index:2;
  background:linear-gradient(135deg,#4a63d6,var(--tech));box-shadow:0 14px 26px -12px rgba(91,124,250,.55)}
.hstep:nth-child(3) i,.hstep:nth-child(4) i{background:linear-gradient(135deg,#e26a3d,var(--infra));box-shadow:0 14px 26px -12px rgba(255,138,92,.55)}
.hstep h3{font-size:20px;margin-bottom:8px}
.hstep p{font-size:14.5px;color:var(--grey)}

/* ===== CONNECT ===== */
.connect{position:relative;overflow:hidden;background:linear-gradient(150deg,#f0f3ff,#fff3ea);border:1px solid var(--line);border-radius:40px;margin:0 20px 20px;text-align:center}
.connect-orb{position:absolute;width:640px;height:640px;left:50%;top:100%;transform:translate(-50%,-40%);border-radius:50%;
  filter:blur(90px);opacity:.5;background:radial-gradient(circle at 40% 40%,#dfe7ff,#ffe0cf 70%,transparent)}
.connect-inner{position:relative;z-index:2}
.connect h2{color:var(--ink);font-size:clamp(30px,4.6vw,52px);letter-spacing:-1px;margin-bottom:16px}
.connect p{color:var(--grey);max-width:520px;margin:0 auto 34px;font-size:17px}
.connect-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.connect-mail{color:var(--grey);font-size:14.5px;border-bottom:1px solid #c6cdde;padding-bottom:2px;transition:.25s}
.connect-mail:hover{color:var(--ink);border-color:var(--ink)}

/* ===== FOOTER ===== */
.hfoot{padding:34px 0}
.hfoot-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hfoot img{height:28px}
.hfoot span{font-size:13px;color:var(--grey)}
.hfoot-links{display:flex;gap:22px}
.hfoot-links a{font-size:13.5px;font-weight:500;color:var(--ink)}
.hfoot-links a:hover{color:var(--tech)}

/* ===== REVEAL ===== */
.hreveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.hreveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-art{min-height:320px}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .hsteps{grid-template-columns:repeat(2,1fr);gap:34px}
  .steps-line{display:none}
}
@media(max-width:860px){
  .hburger{display:block}
  .hlinks{position:fixed;inset:72px 0 auto 0;background:var(--cream);flex-direction:column;align-items:stretch;
    padding:18px 24px 26px;gap:6px;border-bottom:1px solid var(--line);display:none}
  .hlinks.open{display:flex}
  .hlinks a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .hlinks a:last-child{border-bottom:none}
  .div-row{grid-template-columns:1fr;gap:16px;padding:34px 26px}
  .div-num{font-size:40px}
  .div-go{display:none}
}
@media(max-width:620px){
  section{padding:72px 0}
  .hero{padding:80px 0 70px}
  .impact-grid,.hsteps{grid-template-columns:1fr}
  .impact,.connect{border-radius:26px;margin:0 10px}
  .connect{margin-bottom:12px}
  .hero-actions .hbtn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .hero-orb,.art-card,.art-ring,.ribbon-track{animation:none}
  .hreveal{opacity:1;transform:none;transition:none}
}