/* ==========================================================================
   Hamiltonn Cloud — Visual layer v2.1.0  (prefix: cv-)
   Loaded after cosmos.css. Adds the curved product gallery hero, photo and
   film imagery, condensed display headings and the showcase sections.
   ========================================================================== */

:root{
  --display:'Barlow Condensed','Inter',sans-serif;
  --cv-cyan:#5EEAD4;
}

/* ---------- Display type (section headings) ---------- */
.section-head h2,.cta-band h2,.cv-h,.cx-hero .display,.cx-hero h1,.family__copy h3,.split h2,.cv-feature h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;
}
.section-head h2,.split h2{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.cx-hero h1,.cx-hero .display{font-size:clamp(2.7rem,5.4vw,5rem);letter-spacing:-.005em;line-height:.92}
.cx-hero--home .display{font-size:clamp(3.2rem,7vw,6.6rem)}
.cta-band h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.section-head .eyebrow,.cv-eyebrow{font-family:var(--font);letter-spacing:.26em}
.hc-grad{background:linear-gradient(95deg,#fff 0%,#8FB0FF 45%,#5EEAD4 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Film backdrops (replaces the smoke film) ---------- */
.cx-hero__poster,.cx-hero__video{transform:none;transform-origin:center;object-position:center;filter:none}
.cx-hero__shade{
  background:
    linear-gradient(to right,rgba(4,6,12,.92) 0%,rgba(4,6,12,.72) 40%,rgba(4,6,12,.25) 100%),
    linear-gradient(to top,var(--cx-black) 0%,rgba(4,6,12,0) 32%);
}
.cx-hero:has(.hero-visual) .cx-hero__media{opacity:.55}

.cx-hero__media:not([data-film]) .cx-hero__poster{opacity:.5}
.cx-hero__media:not([data-film])+.cx-hero__shade{background:linear-gradient(to right,rgba(4,6,12,.97) 0%,rgba(4,6,12,.8) 45%,rgba(4,6,12,.35) 100%),linear-gradient(to top,var(--cx-black) 0%,rgba(4,6,12,0) 32%)}

/* ---------- HOME HERO: curved product gallery ---------- */
.hero.cx-hero--home{min-height:max(100svh,860px);padding:0;display:block}
.cx-hero--home>.container{display:block;flex:none;padding:0;width:100%}
.cx-hero--home .cx-hero__media{opacity:1}
.cv-gal{
  position:relative;z-index:2;height:max(100svh,860px);perspective:1400px;perspective-origin:50% 42%;
  overflow:hidden;touch-action:pan-y;
}
.cv-gal__ring{
  position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(0,-50%,calc(var(--R,1000px)*-1 - var(--push,140px))) rotateY(var(--rot,0deg));transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.cv-gal.is-dragging .cv-gal__ring{transition:none}
.cv-gal__item{
  position:absolute;left:0;top:0;width:var(--pw,560px);aspect-ratio:1200/676;margin:-16% 0 0 calc(var(--pw,560px)/-2);
  transform:rotateY(calc(var(--i)*var(--step))) translateZ(var(--R,1100px));backface-visibility:hidden;
  border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0A0F1C;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04);
  transition:box-shadow .4s,filter .6s;
}
.cv-gal__item img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cv-gal__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,12,.75),transparent 55%);pointer-events:none}
.cv-gal__cap{
  position:absolute;left:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.cv-gal__cap small{font-weight:500;color:rgba(255,255,255,.62)}
.cv-gal__cap .badge{font-size:.6rem;padding:2px 8px}
.cv-gal__item.is-front{box-shadow:0 60px 140px -30px rgba(0,0,0,1),0 0 70px -10px rgba(91,140,255,.45),0 0 0 1px rgba(255,255,255,.12)}
.cv-gal__item:not(.is-front):not(.is-near){filter:brightness(.5) saturate(.8);pointer-events:none}
.cv-gal__item.is-near{filter:brightness(.78)}
.cv-gal__floor{ /* reflective floor + grid, like the reference */
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,6,12,1) 0%,rgba(4,6,12,.55) 60%,transparent 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 60px);
  transform:perspective(600px) rotateX(55deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent);mask-image:linear-gradient(to top,#000 20%,transparent);
}
.cx-hero--home .cv-gal__copy{
  position:absolute;max-width:none;left:var(--cx-pad);right:var(--cx-pad);top:50%;transform:translateY(-58%);z-index:3;pointer-events:none;
  text-align:center;
}
.cx-hero--home .cv-gal__copy>*{pointer-events:auto;position:relative}
.cx-hero--home .cv-gal__copy::before{content:"";position:absolute;left:50%;top:50%;width:min(1200px,120vw);height:150%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(4,6,12,.86),rgba(4,6,12,.55) 55%,transparent);pointer-events:none}
.cv-gal__copy .eyebrow{margin-bottom:22px}
.cv-gal__copy .display{margin:0 auto;max-width:1100px;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.8)}
.cx-hero--home .cv-gal__copy>p.lead{margin:22px auto 30px;max-width:560px;text-align:center;color:rgba(255,255,255,.72);font-size:1.08rem;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.cv-gal__copy .btn-row{justify-content:center;gap:14px}
.cv-gal__nav{
  position:absolute;right:var(--cx-pad);bottom:110px;z-index:4;display:flex;gap:10px;
}
.cv-gal__nav button{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:background .2s,transform .2s;
}
.cv-gal__nav button:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.cv-gal__nav svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-gal__title{
  position:absolute;left:var(--cx-pad);bottom:110px;z-index:4;color:#fff;font-weight:600;font-size:1.05rem;display:flex;flex-direction:column;gap:4px;
}
.cv-gal__title small{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.cv-gal__title b{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.cx-hero--home .cx-bottom{z-index:5}
@media(max-width:900px){
  .cx-hero--home .cv-gal__copy{transform:translateY(-64%)}
  .hero.cx-hero--home,.cv-gal{min-height:max(100svh,760px);height:auto}
  .cv-gal{height:max(100svh,760px);perspective:900px}
  .cv-gal__item{--pw:min(76vw,400px)}
  .cv-gal__ring{top:68%}
  .cx-hero--home .cv-gal__copy{top:38%;transform:translateY(-50%)}
  .cv-gal{--push:60px}
  .cv-gal__copy{transform:translateY(-64%)}
  .cv-gal__nav{bottom:118px;right:var(--cx-pad)}
  .cv-gal__title{bottom:118px}
  .cv-gal__title b{font-size:1.1rem}
  .cv-gal__floor{display:none}
}
@media(max-width:560px){
  .cv-gal__copy .btn-row .btn{width:100%;justify-content:center}
  .cv-gal__title{display:none}
  .cx-hero--home .display{font-size:clamp(2.6rem,13vw,3.4rem)}
}

/* ---------- Media helpers ---------- */
.cv-media{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--cx-line-2);background:#0A0F1C;isolation:isolate}
.cv-media img,.cv-media video{display:block;width:100%;height:100%;object-fit:cover}
.cv-media{height:auto}
.cv-bg__media img{height:100%}
.cv-media--tall{aspect-ratio:4/5}
.cv-media--wide{aspect-ratio:16/10}
.cv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,12,.55),transparent 50%);pointer-events:none}
.cv-media__cap{position:absolute;left:18px;bottom:16px;right:18px;z-index:2;color:#fff;font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:10px}
.cv-media__cap small{font-weight:500;color:rgba(255,255,255,.6)}

/* section with film/photo backdrop */
.cv-bg{position:relative;isolation:isolate;overflow:hidden}
.cv-bg__media{position:absolute;inset:0;z-index:-2}
.cv-bg__media img,.cv-bg__media video{width:100%;height:100%;object-fit:cover;display:block}
.cv-bg__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(4,6,12,.96) 0%,rgba(4,6,12,.82) 50%,rgba(4,6,12,.55) 100%)}
.cv-bg--center .cv-bg__shade{background:radial-gradient(900px 500px at 50% 50%,rgba(4,6,12,.6),rgba(4,6,12,.92) 75%)}
.cv-bg--top .cv-bg__shade{background:linear-gradient(to bottom,rgba(4,6,12,.4),rgba(4,6,12,.96) 70%)}

/* laptop frame */
.cv-laptop{position:relative;margin:0 auto;width:100%;max-width:900px}
.cv-laptop__screen{
  position:relative;border-radius:16px 16px 4px 4px;padding:10px 10px 0;background:linear-gradient(180deg,#1A2235,#0B1020);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 50px 100px -30px rgba(0,0,0,.95);
}
.cv-laptop__screen::before{content:"";position:absolute;top:4px;left:50%;width:70px;height:4px;border-radius:2px;background:#060912;transform:translateX(-50%)}
.cv-laptop__screen img{display:block;width:100%;height:auto;border-radius:8px 8px 0 0;aspect-ratio:1200/676;object-fit:cover;object-position:top}
.cv-laptop__base{
  height:14px;margin:0 -4%;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#2A3550,#121A2C);
  border:1px solid rgba(255,255,255,.14);border-top:0;position:relative;
}
.cv-laptop__base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:4px;border-radius:0 0 6px 6px;background:#070A14;transform:translateX(-50%)}

/* ---------- SaaS products showcase ---------- */
.cv-products{display:grid;gap:28px}
.cv-feature{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(28px,4vw,56px);border-radius:var(--r-xl);border:1px solid var(--cx-line);background:var(--cx-glass);
  position:relative;overflow:hidden;isolation:isolate;
}
.cv-feature::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 400px at 100% 0%,rgba(91,140,255,.16),transparent 60%)}
.cv-feature--rev{grid-template-columns:.9fr 1.1fr}
.cv-feature--rev .cv-feature__media{order:-1}
.cv-feature--biz::before{background:radial-gradient(700px 400px at 100% 0%,rgba(45,212,191,.16),transparent 60%)}
.cv-feature--ai::before{background:radial-gradient(700px 400px at 100% 0%,rgba(183,155,255,.18),transparent 60%)}
.cv-feature__idx{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1;color:rgba(255,255,255,.14);letter-spacing:.02em}
.cv-feature h3{font-size:clamp(1.9rem,3vw,2.8rem);margin:10px 0 12px;color:#fff}
.cv-feature p{color:var(--text);max-width:52ch}
.cv-feature__tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.cv-feature__tags .pill{font-size:.78rem}
.cv-feature__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.84rem;color:var(--text-faint)}
.cv-feature__meta a{color:var(--accent-strong)}
.cv-feature__media{position:relative}
.cv-feature__media .cv-laptop{transform:perspective(1400px) rotateY(-6deg) rotateX(3deg);transform-origin:center}
.cv-feature--rev .cv-feature__media .cv-laptop{transform:perspective(1400px) rotateY(6deg) rotateX(3deg)}
@media(max-width:980px){
  .cv-feature,.cv-feature--rev{grid-template-columns:1fr}
  .cv-feature--rev .cv-feature__media{order:0}
  .cv-feature__media .cv-laptop,.cv-feature--rev .cv-feature__media .cv-laptop{transform:none}
}

/* ---------- Facts band ---------- */
.cv-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cx-line);border:1px solid var(--cx-line);border-radius:var(--r-xl);overflow:hidden}
.cv-fact{padding:28px 26px;background:#07090F}
.cv-fact b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4.5vw,4rem);line-height:1;color:#fff;letter-spacing:.01em}
.cv-fact b i{font-style:normal;color:var(--accent-strong)}
.cv-fact span{display:block;margin-top:8px;font-size:.9rem;color:var(--text-soft)}
@media(max-width:900px){.cv-facts{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.cv-facts{grid-template-columns:1fr}}

/* ---------- Numbered services list ("How we can help") ---------- */
.cv-help{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.cv-help__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--cx-line)}
.cv-help__list li{border-bottom:1px solid var(--cx-line)}
.cv-help__list a{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;padding:22px 6px;color:#fff;text-decoration:none;
  transition:padding .25s var(--ease),background .25s;
}
.cv-help__list a:hover{padding-left:16px;background:rgba(255,255,255,.03)}
.cv-help__list small{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:.08em;color:var(--accent-strong)}
.cv-help__list b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:.01em;line-height:1}
.cv-help__list span{font-family:var(--font);font-weight:500;text-transform:none;letter-spacing:0;display:block;font-size:.9rem;color:var(--text-soft);margin-top:5px}
.cv-help__list svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .2s,transform .25s}
.cv-help__list a:hover svg{opacity:1;transform:translateX(5px)}
.cv-help__side{position:sticky;top:110px}
.cv-help__side .cv-media{margin-top:24px}
@media(max-width:980px){.cv-help{grid-template-columns:1fr}.cv-help__side{position:static}}

/* ---------- Pricing summary ---------- */
.cv-price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cv-price .card{padding:30px 28px;display:flex;flex-direction:column}
.cv-price h3{font-family:var(--display);text-transform:uppercase;font-size:1.7rem;font-weight:700;margin-bottom:6px}
.cv-price .who{font-size:.92rem;color:var(--text-soft);min-height:48px}
.cv-price .price{font-family:var(--display);font-weight:800;font-size:2.2rem;color:#fff;margin:18px 0 2px;line-height:1}
.cv-price .price small{font-family:var(--font);font-weight:500;font-size:.85rem;color:var(--text-soft)}
.cv-price ul{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:9px;font-size:.92rem}
.cv-price li{display:flex;gap:10px;align-items:flex-start}
.cv-price li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--accent-strong)}
.cv-price .btn{margin-top:auto}
.cv-price .card--featured{background:linear-gradient(180deg,rgba(91,140,255,.14),rgba(255,255,255,.03));border-color:var(--accent-line)}
@media(max-width:900px){.cv-price{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- Insight cards (resources) ---------- */
.cv-insight{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cv-insight a.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cv-insight .cv-media{border:0;border-radius:0;aspect-ratio:16/10}
.cv-insight .cv-insight__body{padding:22px 24px 26px}
.cv-insight h3{font-family:var(--display);text-transform:uppercase;font-size:1.45rem;font-weight:700;margin-bottom:8px;color:#fff}
.cv-insight p{font-size:.92rem}
.cv-insight .cv-insight__kicker{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:10px;display:block}
@media(max-width:900px){.cv-insight{grid-template-columns:1fr}}

/* ---------- Image headers on existing grids (who it's for) ---------- */
.cv-imgcards .card{padding:0;overflow:hidden}
.cv-imgcards .card .cv-media{border:0;border-radius:0;aspect-ratio:16/9}
.cv-imgcards .card>.cv-body{padding:20px 22px 24px}
.cv-imgcards .card-icon{position:absolute;top:14px;left:14px;z-index:3;margin:0}

/* ---------- Split sections get media ---------- */
.cv-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:980px){.cv-split{grid-template-columns:1fr}}

/* ---------- Page heroes: image strip ---------- */
.cx-hero .hero__copy .cv-eyebrow{margin-bottom:14px}

@media(prefers-reduced-motion:reduce){
  .cv-gal__ring{transition:none}
}