/* ========================= common.css ========================= -*/
:root{
/* Brand palette */
--brand:#42667d;
--accent:#006d77;
--ink:#4a5c86;
--muted:#5e6f6c;
--bg:#d0d6e2; /* ✨ requested base shade */
--bg-soft:#e6ebf5; /* lighter plate */
--surface:#e9edf6; /* card surface */
--white:#ffffff;
--danger:#e63946;


  --shadow-light: #ffffff;
  --shadow-dark: #c3c9d7;
 --offset: 12px;

/* Type scale */
--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
--font-head: var(--font-body);
--h1: clamp(34px, 3.6vw, 54px);
--h1_colour : #8be1d2;
--h2: clamp(26px, 3.2vw, 40px);
--h2_colour : #8be1d2;
--h3: clamp(22px, 2.6vw, 30px);
--h3_colour : #8be1d2;
--h4: clamp(18px, 2.1vw, 24px);
--h4_colour : #8be1d2;
--h5: clamp(16px, 1.8vw, 20px);
--h5_colour : #8be1d2;
--lead: 1.15;


/* Layout */
--container: 1200px;
--radius: 18px;
--shadow-soft: 10px 10px 20px rgba(0,0,0,.08), -10px -10px 20px rgba(255,255,255,.9);
--shadow-inset: inset 10px 10px 18px rgba(0,0,0,.08), inset -10px -10px 18px rgba(255,255,255,.9);


/* Header */
--header-h: 72px;
--header-bg: var(--bg) 
--glass: saturate(160%) blur(10px);

  --cube-size: clamp(180px, 28vw, 380px);
  --orb-size: clamp(200px, 28vw, 420px);

/* footer */

  --social-wrap: 42px;   /* circle size */
  --social-icon: 20px;   /* svg size */

  --shadow-light: #ffffff;
  --shadow-dark: #c3c9d7;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;   background: var(--bg);
color:var(--ink); font-family:var(--font-body); line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}

.container{max-width:var(--container); margin-inline:auto; padding:0 20px}


/* ===== Header (common) ===== */
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:var(--glass); background:var(--header-bg);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{ display:flex; align-items:center; gap:16px; min-height:var(--header-h); position:relative; }


.nav .logo{display:flex; align-items:center; gap:12px; padding:2px 0}
.nav .logo img{height:66px}
.nav .brand{font-weight:800; letter-spacing:.2px; color:var(--ink)}

.nav__spacer{flex:1}

/* Desktop: burger hidden, menu visible */
.burger{
  display:none; flex-direction:column; gap:5px; padding:10px;
  border-radius:12px; background:transparent; border:0; cursor:pointer; z-index:5;
}
.burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

.nav__list{
  display:flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0;
}
.nav__list a{ padding: 10px 16px; }   
.nav__list a.is-active { box-shadow: var(--shadow-soft); background: var(--surface); }
.nav__list .app-menu{ margin-left: 8px; }/* extra space before the 3×3 icon */

/* Mobile/Tablet: collapse nav, show burger */
@media (max-width: 900px){
  .burger{ display:flex; }              /* 👈 ONLY here */
  .nav__list{ display:none; }           /* hidden until toggled */
  .nav__list .app-menu{ margin-left: 0; }
  .nav__list.open{ gap: 14px;
    display:flex;
    position:absolute;
    top:calc(var(--header-h) - 2px);
    left:0; right:0;
    padding:16px;
    background:var(--surface);
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
    box-shadow:var(--shadow-soft);
    flex-direction:column; gap:10px;
    z-index:4;
  }
}

/* ---- Hero two-column layout common for all the pages ---- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}


.hero .col-left{ z-index:1; }
.hero .col-right{ z-index:1; justify-self:end; }

/* Mobile stacking */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .col-right{ justify-self:center; }
  :root{ --cube-size: clamp(160px, 50vw, 260px); }
}

/* ---- End Hero two-column layout common for all the pages ---- */



/* ===== App menu (Google-style grid) ===== */
.neo-float{ border-radius: 24px; padding: 14px; }
.neo-grid{ display:grid; grid-template-columns: repeat(3, 10px); gap: 6px; padding: 10px; border-radius: 12px; }

ig-header--toggle{ z-index: 3; touch-action: manipulation; cursor: pointer; }

/* 9-dot trigger */
.ig-header--toggle .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--bg);
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

/* Hide the checkbox that toggles the menu */
.header-checkbox{
  position:absolute; width:1px; height:1px; clip:rect(0 0 0 0);
  overflow:hidden; white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Dots */
.slider-controls {
  display: hidden;
  gap: 10px;
  margin-top: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c3c9d7;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dot.active {
  background: #2d3440;
}


.apps-menu {
  min-width: 400px;
  max-height: auto;
  border-radius: 20px;
  padding: 16px;
  position: absolute; 
  right: 0; 
  top: calc(100% + 10px);
  background: var(--bg);
  box-shadow: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
  display: none;
  z-index: 999;
}
/* 2) Let the nav scroll horizontally but NOT clip vertically */
@media (max-width: 768px){
  .neo-header .main-nav{
    overflow-x: auto;
    overflow-y: visible;          /* <-- important: allow dropdown to show */
  }

  /* 3) Make the menu sit above everything */
  #apps-menu{
    z-index: 2000;                /* higher than header */
    right: 12px; left: 12px;      /* comfy margins on small screens */
    width: auto;                  /* full width between 12px gutters */
  }
}


.header-checkbox:checked ~ #apps-menu{
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* SHOW menu when the checkbox is checked */
.header-checkbox:checked ~ #apps-menu { 
  display: block; 
}

/* Scrollable inner wrapper */
.apps-scroll{
  max-height: min(60vh, 360px);   /* limit height so content overflows */
  overflow-y: auto;               /* allow vertical scrolling */
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  scrollbar-gutter: stable both-edges;
  
}

/* WebKit (Chrome, Edge, Safari) */
.apps-scroll::-webkit-scrollbar{
  width: 8px;                                              /* vertical thickness */
}
.apps-scroll::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
  margin: 8px;                                             /* top/bottom gap */
}
.apps-scroll::-webkit-scrollbar-thumb{
  background-color: rgba(14,107,168,.45);                  /* thumb color */
  border-radius: 999px;
  background-clip: padding-box;
  border: 2px solid transparent;                           /* inner padding look */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);       /* subtle gloss */
}
.apps-scroll::-webkit-scrollbar-thumb:hover{
  background-color: rgba(14,107,168,.6);
}
.apps-scroll::-webkit-scrollbar-corner{ background: transparent; }

/* Remove top/bottom arrow buttons */


.apps-scroll::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}

/* Grid layout: always 3 columns */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  gap: 2px 2px;
}

/* App items */
.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  padding: 5px;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.app-item:hover {
  background: rgba(255,255,255,.65);
  transform: translateY(-2px);
  box-shadow: inset 4px 4px 8px var(--shadow-dark),
              inset -4px -4px 8px var(--shadow-light);
}

/* Icon + label */
.app-item .svc-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow: inset 6px 6px 14px var(--shadow-dark),
              inset -6px -6px 14px var(--shadow-light);
}
.app-item .svc-icon .i {
  width: 28px; height: 28px;
  stroke: #4b5870;
  stroke-width: 1.8;
  fill: none;
}
.app-item .svc-icon.accent .i { stroke: #ef6b57; }

/* Make <img> icons behave like the old inline SVG .i */
.app-item .svc-icon img {
  width: 28px;
  height: 28px;
  display: block;
}


.app-item .app-name {
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  color: #7c8696;
  text-align: center;
}






/* ===== Hero (top of each page) ===== */



.hero{
position:relative; min-height:56vh; display:flex; align-items:center; isolation:isolate; overflow:hidden;
background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.6) 0 35%, transparent 100%), var(--hero-img, none) center/cover no-repeat;
}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.35), transparent 40%, rgba(255,255,255,.2)); pointer-events:none}
.hero .container{padding:72px 20px}
.hero .eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.hero h1{font-family:var(--font-head); font-size:var(--h1); margin:.2em 0 .2em; color : var(--h1_colour); line-height:1.1}
.hero p{max-width:760px; font-size:1.05rem}
.hero .cta{display:flex; gap:14px; margin-top:18px}
.button{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; font-weight:700; background:var(--white); color:var(--ink); box-shadow:var(--shadow-soft)}
.button.primary{background:var(--brand); color:var(--white)}
.button.ghost{background:var(--surface)}


/* Neumorphic cards & sections */
.section{padding:72px 0}
.card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:22px}
.card.inset{box-shadow:var(--shadow-inset)}
.grid{display:grid; gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

@media (max-width: 900px){
.grid.cols-3{grid-template-columns:1fr}
.grid.cols-4{grid-template-columns:1fr 1fr}
}

/* Make cap-card anchors look/behave like your article tiles */
.cap-grid .cap-card {
  display: block;                 /* anchor as block (full tile) */
  text-decoration: none;          /* remove default underline */
  color: inherit;                 /* keep your text color */
  cursor: pointer;                /* hand cursor */
  border-radius: 18px;            /* match your neumorphic style */
}

/* Keep your existing hover/active styles working */
.cap-grid .cap-card:hover,
.cap-grid .cap-card:focus {
  transform: translateY(-2px);
  box-shadow:
    inset var(--offset) var(--offset) calc(var(--offset)*2) var(--shadow-dark),
    inset calc(var(--offset)*-1) calc(var(--offset)*-1) calc(var(--offset)*2) var(--shadow-light);
}

/* Keyboard focus ring (accessible) */
.cap-grid .cap-card:focus-visible {
  outline: 2px solid #3b82f6;     /* subtle blue ring */
  outline-offset: 4px;
}



/* ===== Footer (common) ===== */

.site-footer{background:var(--surface); box-shadow:var(--shadow-inset); margin-top:40px}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px}
.site-footer .bottom{border-top:1px dashed rgba(0,0,0,.1); margin-top:18px; padding-top:14px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
@media (max-width: 900px){
.site-footer .cols{grid-template-columns:1fr}
}


/* === Social icons – fixed size, neumorphic === */
/* Footer social layout + sizing */
.site-footer .socials{
  display:flex; flex-wrap:wrap; gap:12px;
  list-style:none; padding:0; margin:8px 0 0;
}

:root{
  --social-wrap: 42px;  /* outer circle */
  --social-pad: 8px;    /* padding inside circle */
}

.site-footer .socials .neo-circle{
  inline-size: var(--social-wrap);
  block-size: var(--social-wrap);
  aspect-ratio: 1;
  padding: var(--social-pad);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}

.site-footer .socials .neo-circle img{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit: contain; display:block;
}

.site-footer .socials .neo-circle:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft), 0 8px 20px rgba(14,107,168,.12);
}
.site-footer .socials .neo-circle:focus-visible{
  outline:2px solid rgba(14,107,168,.35); outline-offset:2px;
}

@media (max-width: 900px){
  :root{ --social-wrap: 38px; --social-pad: 7px; }
}






/* Utilities */
.muted{color:var(--muted)}
.center{text-align:center}
.spacer-8{height:8px}
.spacer-16{height:16px}
.spacer-24{height:24px}


/* Page-specific hero images via body classes */
body.page-home { --hero-img: url('../images/hero/index-hero.jpg'); }
body.page-tech { --hero-img: url('../images/hero/technologies-hero.jpg'); }
body.page-products { --hero-img: url('../images/hero/products-hero.jpg'); }
body.page-clients { --hero-img: url('../images/hero/clients-hero.jpg'); }
body.page-blog { --hero-img: url('../images/hero/blog-hero.jpg'); }

