/*
Theme Name: Clout Innovations
Theme URI: https://cloutinnovations.ro
Author: Clout Innovations
Description: Lightweight custom presentation theme for Clout Innovations. One-page technology company website with editable content through the WordPress Customizer.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: clout-innovations
*/

:root {
  --ci-navy: #07131f;
  --ci-navy-2: #0b2235;
  --ci-blue: #179ee8;
  --ci-cyan: #58d6ff;
  --ci-ice: #eef8ff;
  --ci-text: #112235;
  --ci-muted: #66798c;
  --ci-line: rgba(16, 84, 122, .14);
  --ci-white: #fff;
  --ci-shadow: 0 22px 70px rgba(7, 31, 49, .13);
  --ci-radius: 24px;
  --ci-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ci-text);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; }

.ci-container { width: min(calc(100% - 40px), var(--ci-max)); margin: 0 auto; }
.ci-kicker { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border-radius:999px; background:rgba(23,158,232,.10); color:#087cb9; text-transform:uppercase; font-size:12px; letter-spacing:.14em; font-weight:800; }
.ci-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ci-blue); box-shadow:0 0 0 5px rgba(23,158,232,.12); }
.ci-section { padding: 96px 0; }
.ci-section-head { max-width: 760px; margin-bottom: 42px; }
.ci-section h2 { font-size: clamp(34px, 5vw, 58px); letter-spacing:-.045em; line-height:1.04; margin:16px 0; }
.ci-section-head p { margin:0; color:var(--ci-muted); font-size:18px; }

/* topbar */
.ci-topbar { background:#06111b; color:rgba(255,255,255,.76); font-size:12px; letter-spacing:.04em; }
.ci-topbar-inner { min-height:34px; display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.ci-topbar a:hover { color:#fff; }

/* header */
.ci-site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.90); backdrop-filter: blur(18px); border-bottom:1px solid rgba(15,66,96,.08); }
.ci-nav { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:34px; }
.ci-brand { display:flex; align-items:center; gap:15px; min-width:230px; }
.ci-brand img, .custom-logo { width:auto; max-height:64px; }
.ci-brand-text { font-weight:800; font-size:20px; letter-spacing:-.03em; color:#0d2e47; }
.ci-menu { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.ci-menu a { padding:11px 14px; border-radius:10px; color:#29465c; font-weight:650; font-size:14px; transition:.2s ease; }
.ci-menu a:hover { background:#eef8ff; color:#087cba; transform:translateY(-1px); }
.ci-nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--ci-line); background:#fff; border-radius:13px; cursor:pointer; }
.ci-nav-toggle span { display:block; width:20px; height:2px; background:#153851; margin:4px auto; }

/* hero */
.ci-hero { position:relative; min-height:680px; overflow:hidden; display:flex; align-items:center; color:#fff; background:#07131f; }
.ci-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(3,15,25,.93) 0%, rgba(3,18,31,.76) 46%, rgba(3,17,28,.35) 100%), url('assets/images/hero-clouds.jpg'); background-size:cover; background-position:center; transform:scale(1.02); }
.ci-hero::after { content:""; position:absolute; inset:0; opacity:.28; background-image: linear-gradient(rgba(88,214,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(88,214,255,.10) 1px, transparent 1px); background-size:64px 64px; mask-image: linear-gradient(to right, black, transparent 72%); }
.ci-hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; padding:110px 0; }
.ci-hero-copy { max-width:720px; }
.ci-hero .ci-kicker { background:rgba(88,214,255,.12); color:#9ee9ff; border:1px solid rgba(88,214,255,.22); }
.ci-hero h1 { margin:20px 0 22px; font-size:clamp(52px, 7vw, 88px); letter-spacing:-.06em; line-height:.94; max-width:900px; }
.ci-hero h1 span { color:#65d8ff; }
.ci-hero p { max-width:670px; color:rgba(255,255,255,.78); font-size:19px; margin:0 0 34px; }
.ci-actions { display:flex; flex-wrap:wrap; gap:13px; }
.ci-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:13px; font-size:14px; font-weight:800; transition:.2s ease; border:1px solid transparent; }
.ci-btn-primary { background:linear-gradient(135deg, #179ee8, #58d6ff); color:#04131f; box-shadow:0 12px 32px rgba(23,158,232,.28); }
.ci-btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(23,158,232,.35); }
.ci-btn-ghost { border-color:rgba(255,255,255,.24); color:#fff; background:rgba(255,255,255,.06); }
.ci-btn-ghost:hover { background:rgba(255,255,255,.12); }
.ci-hero-card { justify-self:end; width:min(100%, 430px); padding:22px; background:rgba(5,25,40,.55); border:1px solid rgba(145,224,255,.20); border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.26); backdrop-filter:blur(16px); }
.ci-hero-card img { border-radius:20px; width:100%; }
.ci-hero-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.ci-hero-mini div { padding:12px 10px; border-radius:14px; background:rgba(255,255,255,.06); text-align:center; color:rgba(255,255,255,.75); font-size:11px; font-weight:700; }

/* about */
.ci-about { background:#f7fbfe; }
.ci-about-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:74px; }
.ci-about-visual { position:relative; }
.ci-about-visual img { border-radius:var(--ci-radius); box-shadow:var(--ci-shadow); }
.ci-badge { position:absolute; right:-24px; bottom:-24px; padding:18px 20px; border-radius:18px; background:#07131f; color:#fff; box-shadow:var(--ci-shadow); }
.ci-badge strong { display:block; color:#62d8ff; font-size:26px; line-height:1; }
.ci-about-copy p { color:var(--ci-muted); font-size:17px; }
.ci-checks { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.ci-check { display:flex; gap:11px; align-items:flex-start; padding:15px; border-radius:15px; background:#fff; border:1px solid var(--ci-line); }
.ci-check i { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#e8f8ff; color:#0798de; font-style:normal; font-weight:900; }

/* services */
.ci-services { background:#fff; }
.ci-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ci-service { position:relative; overflow:hidden; border-radius:22px; background:#fff; border:1px solid var(--ci-line); box-shadow:0 14px 48px rgba(11,61,89,.08); transition:.25s ease; }
.ci-service:hover { transform:translateY(-7px); box-shadow:0 25px 70px rgba(11,61,89,.13); }
.ci-service-img { aspect-ratio: 1.2/1; overflow:hidden; background:#07192a; }
.ci-service-img img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.ci-service:hover .ci-service-img img { transform:scale(1.035); }
.ci-service-content { padding:25px 25px 28px; }
.ci-service-number { display:inline-block; color:#0798df; font-size:12px; font-weight:850; letter-spacing:.14em; margin-bottom:8px; }
.ci-service h3 { font-size:23px; letter-spacing:-.03em; margin:0 0 14px; }
.ci-service ul { margin:0; padding:0; list-style:none; color:var(--ci-muted); }
.ci-service li { position:relative; padding:6px 0 6px 20px; }
.ci-service li::before { content:""; position:absolute; left:0; top:15px; width:7px; height:7px; border-radius:50%; background:#36bff4; box-shadow:0 0 0 4px #e9f8ff; }

/* why */
.ci-why { color:#fff; background:radial-gradient(circle at 80% 10%, rgba(38,160,218,.22), transparent 35%), #07131f; }
.ci-why .ci-section-head p { color:rgba(255,255,255,.66); }
.ci-why .ci-kicker { background:rgba(88,214,255,.12); color:#8fe4ff; }
.ci-why-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.ci-reason { min-height:245px; padding:24px 20px; border:1px solid rgba(137,220,255,.15); border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); }
.ci-reason .num { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(53,190,245,.12); color:#71dcff; font-weight:900; margin-bottom:25px; }
.ci-reason h3 { margin:0 0 12px; font-size:18px; line-height:1.2; }
.ci-reason p { color:rgba(255,255,255,.60); font-size:14px; margin:0; }

/* contact */
.ci-contact { background:#f7fbfe; }
.ci-contact-card { position:relative; overflow:hidden; padding:58px; border-radius:30px; background:linear-gradient(135deg,#0a263c,#06131f); color:#fff; box-shadow:var(--ci-shadow); }
.ci-contact-card::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-160px; top:-190px; background:rgba(55,196,249,.11); }
.ci-contact-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:end; }
.ci-contact h2 { margin:10px 0 18px; }
.ci-contact p { color:rgba(255,255,255,.68); max-width:640px; }
.ci-contact-list { display:grid; gap:11px; }
.ci-contact-item { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.ci-contact-item span { color:rgba(255,255,255,.53); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.ci-contact-item strong { text-align:right; font-size:14px; }

/* footer */
.ci-footer { padding:35px 0; color:#7b8f9e; background:#050d14; font-size:13px; }
.ci-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ci-footer strong { color:#fff; }

/* generic pages */
.ci-page-hero { padding:90px 0 45px; background:#f6fbfe; }
.ci-page-hero h1 { font-size:clamp(42px,7vw,72px); line-height:1; letter-spacing:-.05em; margin:0; }
.ci-page-content { padding:60px 0 100px; }
.ci-page-content > * { max-width:820px; }

@media (max-width: 980px) {
  .ci-hero-inner, .ci-about-grid, .ci-contact-grid { grid-template-columns:1fr; }
  .ci-hero-card { justify-self:start; width:min(100%,600px); }
  .ci-service-grid { grid-template-columns:1fr 1fr; }
  .ci-why-grid { grid-template-columns:repeat(2,1fr); }
  .ci-badge { right:18px; }
  .ci-menu { position:absolute; display:none; top:86px; right:20px; left:20px; padding:12px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--ci-line); border-radius:18px; box-shadow:var(--ci-shadow); }
  .ci-menu.is-open { display:flex; }
  .ci-menu a { padding:13px 15px; }
  .ci-nav-toggle { display:block; }
}
@media (max-width: 680px) {
  .ci-container { width:min(calc(100% - 28px), var(--ci-max)); }
  .ci-topbar-inner { justify-content:center; gap:12px; flex-wrap:wrap; padding:7px 0; }
  .ci-topbar-inner span { display:none; }
  .ci-nav { min-height:72px; }
  .ci-brand img, .custom-logo { max-height:50px; }
  .ci-brand-text { font-size:17px; }
  .ci-menu { top:73px; }
  .ci-hero { min-height:auto; }
  .ci-hero-inner { padding:82px 0; gap:36px; }
  .ci-hero h1 { font-size:clamp(45px,15vw,68px); }
  .ci-section { padding:72px 0; }
  .ci-service-grid, .ci-why-grid, .ci-checks { grid-template-columns:1fr; }
  .ci-contact-card { padding:34px 24px; }
  .ci-contact-item { align-items:flex-start; flex-direction:column; }
  .ci-contact-item strong { text-align:left; }
  .ci-footer-inner { flex-direction:column; align-items:flex-start; }
}

/* built-in brand/technology artwork - no external images required */
.ci-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#0b7db7; font-weight:900; letter-spacing:-.08em; background:radial-gradient(circle at 35% 30%, #eafdff 0 23%, #aeeaff 24% 48%, #55bce9 49% 64%, #173f6f 65% 100%); border:3px solid #c5efff; box-shadow:inset 0 0 0 2px rgba(5,65,116,.30), 0 7px 18px rgba(11,126,185,.15); }
.ci-hero::before { background-image: radial-gradient(circle at 68% 32%, rgba(83,211,255,.25), transparent 22%), radial-gradient(circle at 82% 22%, rgba(69,153,205,.22), transparent 27%), radial-gradient(circle at 63% 78%, rgba(31,106,153,.22), transparent 25%), linear-gradient(105deg, #030c14 0%, #071925 44%, #0a3145 76%, #07141f 100%); background-size:cover; }
.ci-tech-visual { position:relative; min-height:300px; border-radius:20px; overflow:hidden; background:radial-gradient(circle at 50% 35%, rgba(54,199,255,.26), transparent 24%), linear-gradient(145deg,#071725,#092e46); border:1px solid rgba(116,219,255,.13); }
.ci-tech-visual::before, .ci-tech-visual::after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(86,204,248,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(86,204,248,.08) 1px, transparent 1px); background-size:34px 34px; }
.ci-tech-visual::after { background:radial-gradient(circle, rgba(103,222,255,.22) 1.5px, transparent 2px); background-size:26px 26px; opacity:.30; }
.ci-tech-cloud { position:absolute; z-index:2; width:210px; height:96px; border:2px solid rgba(99,218,255,.64); border-radius:58px; left:50%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(180deg,rgba(80,209,255,.22),rgba(20,87,124,.12)); box-shadow:0 0 40px rgba(46,192,244,.16), inset 0 0 32px rgba(76,208,255,.08); }
.ci-tech-cloud::before, .ci-tech-cloud::after { content:""; position:absolute; border:2px solid rgba(99,218,255,.64); background:#0a2a3d; border-bottom:0; }
.ci-tech-cloud::before { width:82px; height:62px; border-radius:70px 70px 0 0; left:24px; top:-38px; transform:rotate(-5deg); }
.ci-tech-cloud::after { width:96px; height:72px; border-radius:80px 80px 0 0; right:22px; top:-48px; transform:rotate(5deg); }
.ci-tech-chip { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:68px; display:grid; place-items:center; border-radius:18px; border:1px solid #5bd9ff; background:#061722; color:#69ddff; font-size:26px; font-weight:900; box-shadow:0 0 26px rgba(85,215,255,.25); }
.ci-node { position:absolute; z-index:3; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#09283c; border:1px solid rgba(90,213,255,.48); color:#65d8ff; font-size:18px; box-shadow:0 0 20px rgba(69,196,244,.12); }
.ci-node-a { left:12%; top:16%; }.ci-node-b { right:12%; top:18%; }.ci-node-c { left:13%; bottom:14%; }.ci-node-d { right:13%; bottom:15%; }
.ci-about-art { min-height:480px; border-radius:var(--ci-radius); overflow:hidden; background:radial-gradient(circle at 50% 50%, rgba(54,197,247,.18), transparent 27%), linear-gradient(145deg,#081a28,#0e3c56); box-shadow:var(--ci-shadow); }
.ci-about-art::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(93,212,255,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(93,212,255,.07) 1px, transparent 1px); background-size:46px 46px; }
.ci-about-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(85,209,250,.25); border-radius:50%; transform:translate(-50%,-50%); }
.orbit-one { width:290px; height:290px; }.orbit-two { width:390px; height:390px; }
.ci-about-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:170px; height:170px; border-radius:34px; display:grid; place-items:center; text-align:center; background:rgba(4,21,32,.75); border:1px solid rgba(97,217,255,.36); box-shadow:0 0 70px rgba(46,190,242,.15); }
.ci-about-core span { display:block; font-size:56px; line-height:.8; font-weight:900; letter-spacing:-.08em; color:#5dd8ff; }
.ci-about-core small { color:#a7dcef; font-weight:800; letter-spacing:.15em; font-size:9px; }
.ci-service-art { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#62d9ff; background:radial-gradient(circle at 50% 44%, rgba(46,192,246,.22), transparent 30%), #071a29; }
.ci-service-art::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(85,210,250,.18) 1px, transparent 1.8px); background-size:22px 22px; opacity:.35; }
.ci-service-icon { position:relative; z-index:2; font-size:54px; line-height:1; font-weight:900; text-shadow:0 0 26px rgba(71,206,255,.28); }
.ci-service-art small { position:relative; z-index:2; margin-top:18px; font-size:10px; letter-spacing:.25em; font-weight:900; color:rgba(163,231,255,.70); }


/* v1.1 – editable images from Appearance > Customize > Clout Innovations – imagini */
.ci-hero.has-custom-bg::before {
  background-image: linear-gradient(90deg, rgba(3,15,25,.93) 0%, rgba(3,18,31,.76) 46%, rgba(3,17,28,.42) 100%), var(--ci-hero-bg);
  background-size: cover;
  background-position: center;
}
.ci-uploaded-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}
.ci-about-upload {
  width: 100%;
  min-height: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ci-default-logo {
  width: auto;
  max-height: 72px;
  object-fit: contain;
}
@media (max-width: 680px) {
  .ci-about-upload { min-height: 320px; }
  .ci-default-logo { max-height: 54px; }
}