/* ============================================================
   C7GROUP — Corporate design system
   Positioning: International technology. Local expertise. Integrated solutions.
   ============================================================ */

:root{
  --ink:#141418;
  --ink-2:#1B1C22;
  --slate:#24262E;
  --paper:#FFFFFF;
  --mist:#F5F6F8;
  --mist-2:#EEF0F3;
  --line:#E3E5EA;
  --line-dark:#2E313A;

  --red:#EF3A42;
  --red-600:#D8262F;
  --red-050:#FDECED;

  --text:#141418;
  --muted:#666A74;
  --muted-2:#9AA0AB;
  --on-dark:#EDEEF1;
  --on-dark-mut:#9CA0AB;

  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --r:14px;
  --r-sm:10px;

  --f-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'Space Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  --shadow-s:0 1px 2px rgba(20,20,24,.04), 0 2px 8px rgba(20,20,24,.05);
  --shadow-m:0 8px 30px rgba(20,20,24,.09);
  --shadow-l:0 20px 60px rgba(20,20,24,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  font-weight:400; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0; color:var(--text)}
p{margin:0}
::selection{background:var(--red); color:#fff}

/* ---------- layout ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px, 9vw, 128px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--dark{background:var(--ink); color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--mist{background:var(--mist)}
.divider{height:1px; background:var(--line); border:0; margin:0}

.eyebrow{
  font-family:var(--f-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow .idx{color:var(--muted-2); font-weight:400}
.section--dark .eyebrow .idx{color:var(--on-dark-mut)}

.lead{font-size:clamp(18px,2vw,21px); line-height:1.55; color:var(--muted); max-width:62ch; font-weight:400}
.section--dark .lead{color:var(--on-dark-mut)}
.h-xl{font-size:clamp(38px,6.2vw,72px)}
.h-lg{font-size:clamp(30px,4.6vw,52px)}
.h-md{font-size:clamp(24px,3vw,34px)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:600; font-size:15.5px; letter-spacing:.005em;
  padding:14px 24px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--primary{background:var(--red); color:#fff}
.btn--primary:hover{background:var(--red-600)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:transparent}
.section--dark .btn--ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.section--dark .btn--ghost:hover{border-color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header__in{max-width:var(--maxw); margin:0 auto; padding:16px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; height:34px}
.brand img{height:34px; width:auto}
.brand .logo-dark{display:none}
.header.solid{background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(20,20,24,.02)}
.header.solid .logo-light{display:none}
.header.solid .logo-dark{display:block}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  font-size:15px; font-weight:500; color:var(--on-dark); padding:9px 15px; border-radius:100px;
  transition:color .2s, background .2s; letter-spacing:.005em;
}
.nav a:hover{color:#fff}
.header.solid .nav a{color:var(--muted)}
.header.solid .nav a:hover{color:var(--ink); background:var(--mist)}
.header.solid .nav a.active{color:var(--ink)}
.nav a.active{color:#fff}
.nav .btn{margin-left:10px; padding:11px 20px}
.header.solid .nav .btn--ghost{color:var(--ink); border-color:var(--line)}

.burger{display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.28); background:transparent;
  border-radius:10px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.header.solid .burger{border-color:var(--line)}
.burger span{width:18px; height:2px; background:#fff; transition:.3s var(--ease); display:block}
.header.solid .burger span{background:var(--ink)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:96px var(--gutter) 40px;
  transform:translateY(-102%); transition:transform .45s var(--ease); visibility:hidden;
}
.mobile-nav.open{transform:translateY(0); visibility:visible}
.mobile-nav a{font-family:var(--f-display); font-size:clamp(28px,7vw,44px); font-weight:600; color:#fff; padding:8px 0; border-bottom:1px solid var(--line-dark)}
.mobile-nav a .n{font-family:var(--f-mono); font-size:14px; color:var(--red); margin-right:14px; vertical-align:middle}
.mobile-nav .btn{margin-top:24px; align-self:flex-start}

/* ---------- page hero (dark band) ---------- */
.phero{position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; isolation:isolate}
.phero__grid{position:absolute; inset:0; z-index:-1; opacity:.5}
.phero__in{max-width:var(--maxw); margin:0 auto; padding:clamp(130px,17vh,180px) var(--gutter) clamp(56px,8vw,88px)}
.crumb{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:22px}
.crumb a:hover{color:#fff}
.crumb .sep{color:var(--red); margin:0 8px}
.phero h1{font-size:clamp(34px,5.6vw,62px); max-width:16ch}
.phero .lead{margin-top:22px}

/* ---------- home hero ---------- */
.hero{position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; isolation:isolate}
.hero__grid{position:absolute; inset:0; z-index:-1}
.hero__in{max-width:var(--maxw); margin:0 auto; padding:clamp(150px,20vh,220px) var(--gutter) clamp(64px,9vw,110px)}
.hero h1{font-size:clamp(40px,6.6vw,80px); max-width:18ch; letter-spacing:-.03em}
.hero h1 em{font-style:normal; color:var(--red)}
.hero .lead{margin-top:26px; color:#C7CAD2; max-width:58ch}
.hero .btn-row{margin-top:38px}

.triptych{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:64px;
  border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; background:var(--line-dark)}
.triptych div{background:var(--ink); padding:26px 26px 30px}
.triptych .k{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red)}
.triptych .t{font-family:var(--f-display); font-size:clamp(19px,2.2vw,24px); font-weight:600; color:#fff; margin-top:12px}
.triptych .d{font-size:14.5px; color:var(--on-dark-mut); margin-top:8px; line-height:1.5}

/* ---------- section head ---------- */
.shead{max-width:760px; margin-bottom:clamp(40px,5vw,64px)}
.shead.center{margin-inline:auto; text-align:center}
.shead .lead{margin-top:20px}
.shead.center .lead{margin-inline:auto}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:30px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative; height:100%;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:transparent}
.card__idx{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--muted-2)}
.card h3{font-size:20px; margin-top:14px}
.card p{color:var(--muted); font-size:15.5px; margin-top:10px; line-height:1.55}
.card .ic{width:46px; height:46px; border-radius:11px; background:var(--red-050); color:var(--red);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.card .ic svg{width:24px; height:24px}
.card .more{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:600; font-size:14.5px; color:var(--red)}
.card .more svg{width:15px; transition:transform .3s var(--ease)}
.card:hover .more svg{transform:translateX(4px)}
.card--link{cursor:pointer}
.card--dark{background:var(--ink-2); border-color:var(--line-dark)}
.card--dark h3{color:#fff}
.card--dark p{color:var(--on-dark-mut)}

/* solution row (problem->solution->tech) */
.solblock{border-top:1px solid var(--line); padding-block:clamp(44px,6vw,72px)}
.solblock:first-of-type{border-top:0}
.solblock__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:start}
.solblock h2{font-size:clamp(26px,3.4vw,40px)}
.solblock .kick{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:16px}
.solblock .desc{color:var(--muted); font-size:16.5px; line-height:1.6}
.pst{display:grid; gap:16px; margin-top:26px}
.pst .row{display:grid; grid-template-columns:120px 1fr; gap:20px; padding-top:16px; border-top:1px dashed var(--line)}
.pst .row .lbl{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding-top:2px}
.pst .row .val{color:var(--text); font-size:15.5px; line-height:1.55}
.pst .row .val b{font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.04em; padding:6px 12px; border-radius:100px; background:var(--mist); color:var(--text); border:1px solid var(--line)}
.chip--red{background:var(--red-050); color:var(--red-600); border-color:#F6D3D5}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.section--dark .stats,.phero .stats{background:var(--line-dark); border-color:var(--line-dark)}
.stat{background:var(--paper); padding:30px 26px}
.section--dark .stat{background:var(--ink)}
.stat .n{font-family:var(--f-display); font-size:clamp(30px,3.6vw,44px); font-weight:600; letter-spacing:-.02em}
.stat .n .u{color:var(--red)}
.stat .l{font-size:14px; color:var(--muted); margin-top:8px}
.section--dark .stat .l{color:var(--on-dark-mut)}

/* logo wall */
.wall{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.wall .cell{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:14px;
  font-family:var(--f-display); font-weight:600; font-size:15px; color:#42454D; transition:.3s var(--ease)}
.wall .cell:hover{border-color:transparent; box-shadow:var(--shadow-m); transform:translateY(-3px); color:var(--ink)}

/* brand row */
.brandrow{display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,56px); align-items:start;
  border-top:1px solid var(--line); padding-block:clamp(40px,5vw,60px)}
.brandrow:first-of-type{border-top:0}
.brandrow .name{font-family:var(--f-display); font-size:clamp(24px,3vw,32px); font-weight:700}
.brandrow .meta{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em; color:var(--red); margin-top:10px; text-transform:uppercase}
.brandrow h3{font-size:19px; margin-bottom:8px}
.brandrow .cols{display:grid; grid-template-columns:1fr 1fr; gap:28px 40px}
.brandrow .cols p{color:var(--muted); font-size:15px; line-height:1.55}

/* media placeholder */
.ph{position:relative; border-radius:var(--r); overflow:hidden; background:
  linear-gradient(135deg,#1B1C22,#24262E); border:1px solid var(--line-dark); color:var(--on-dark-mut);
  display:flex; align-items:center; justify-content:center; min-height:260px; text-align:center}
.ph.light{background:var(--mist); border-color:var(--line); color:var(--muted-2)}
.ph .tag{position:absolute; top:14px; left:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px; border-radius:100px; background:rgba(239,58,66,.14); color:var(--red)}
.ph .txt{font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; padding:0 24px}

/* case study */
.case{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); transition:.3s var(--ease); height:100%}
.case:hover{box-shadow:var(--shadow-m); transform:translateY(-4px)}
.case .cover{aspect-ratio:16/10; background:linear-gradient(135deg,#1B1C22,#2A2D36); position:relative; color:#fff;
  display:flex; align-items:flex-end; padding:22px}
.case .cover .sector{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--red);
  position:absolute; top:18px; left:18px}
.case .cover h3{font-size:22px; color:#fff; position:relative}
.case .body{padding:24px 24px 28px}
.case .kv{display:grid; grid-template-columns:96px 1fr; gap:8px 16px; font-size:14.5px}
.case .kv dt{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding-top:3px}
.case .kv dd{margin:0; color:var(--text)}
.case .kv dd.tbd{color:var(--muted-2); font-style:italic}

/* value / why list */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.section--dark .why{background:var(--line-dark); border-color:var(--line-dark)}
.why .item{background:var(--paper); padding:32px 28px}
.section--dark .why .item{background:var(--ink)}
.why .n{font-family:var(--f-mono); font-size:12px; color:var(--red); letter-spacing:.1em}
.why h3{font-size:19px; margin:14px 0 10px}
.why p{color:var(--muted); font-size:15px; line-height:1.55}
.section--dark .why p{color:var(--on-dark-mut)}

/* split feature */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.list{display:grid; gap:2px}
.split .list{margin-top:24px}
.list .li{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line)}
.section--dark .list .li{border-color:var(--line-dark)}
.list .li .tick{flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:var(--red-050); color:var(--red);
  display:flex; align-items:center; justify-content:center; margin-top:2px}
.list .li .tick svg{width:13px}
.list .li b{font-weight:600}
.list .li span{color:var(--muted); font-size:15px}
.section--dark .list .li span{color:var(--on-dark-mut)}

/* CTA band */
.cta{background:var(--red); color:#fff; border-radius:var(--r); padding:clamp(40px,6vw,72px);
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center}
.cta h2{color:#fff; font-size:clamp(28px,3.6vw,44px)}
.cta p{color:rgba(255,255,255,.9); margin-top:14px; font-size:17px; max-width:48ch}
.cta .btn--dark{background:#fff; color:var(--ink)}
.cta .btn--dark:hover{background:var(--ink); color:#fff}
.cta .btn--ghost{border-color:rgba(255,255,255,.5); color:#fff}
.cta .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.cta .actions{display:flex; flex-direction:column; gap:12px; align-items:flex-start}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px)}
.info-line{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line)}
.info-line:first-child{border-top:0}
.info-line .ic{flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:var(--mist); color:var(--red);
  display:flex; align-items:center; justify-content:center}
.info-line .ic svg{width:20px}
.info-line .k{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.info-line .v{font-size:17px; font-weight:600; margin-top:2px}
.info-line .v a:hover{color:var(--red)}

form.lead-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,36px)}
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--text)}
.field label .req{color:var(--red)}
.field input,.field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--text);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-050)}
.field textarea{resize:vertical; min-height:120px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{font-size:13px; color:var(--muted-2); margin-top:6px}
.form-success{display:none; padding:18px; border-radius:var(--r-sm); background:var(--red-050); color:var(--red-600); font-weight:600; margin-bottom:18px}
.form-success.show{display:block}

/* footer */
.footer{background:var(--ink); color:var(--on-dark-mut); padding-block:clamp(56px,7vw,84px) 32px}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.footer .flogo img{height:34px; margin-bottom:20px}
.footer .fabout{max-width:34ch; font-size:15px; line-height:1.6}
.footer h4{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); font-weight:700; margin-bottom:18px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.footer ul a{font-size:15px; color:#C7CAD2}
.footer ul a:hover{color:#fff}
.footer__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center;
  border-top:1px solid var(--line-dark); margin-top:52px; padding-top:26px; font-size:13.5px}
.footer__bottom .tag{font-family:var(--f-mono); letter-spacing:.04em}

/* reveal animation */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer .flogo{grid-column:1/-1}
  .wall{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .brand .logo-light{display:block}
  .header.solid .brand .logo-light{display:none}
}
@media (max-width:820px){
  body{font-size:16px}
  .g-2,.g-3,.triptych,.stats,.why,.split,.cta,.contact-grid,.solblock__head,.brandrow,.footer__top{grid-template-columns:1fr}
  .triptych{border-radius:var(--r)}
  .brandrow{grid-template-columns:1fr}
  .brandrow .cols{grid-template-columns:1fr}
  .cta .actions{flex-direction:row}
  .two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(3,1fr)}
  .pst .row{grid-template-columns:1fr}
  .pst .row .lbl{padding-top:0}
}
@media (max-width:520px){
  .g-4,.wall{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr}
  .btn{width:100%; justify-content:center}
  .btn-row{flex-direction:column; align-items:stretch}
  .cta .actions{flex-direction:column; width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}
  .btn:hover,.card:hover,.case:hover,.wall .cell:hover{transform:none}
}