/* ===== Innani Digital — brand: red / black / white ===== */
:root{
  --red: #E31E24;
  --red-dark: #b3161b;
  --black: #171717;
  --gray: #58595b;
  --gray-light: #f3f3f3;
  --white: #ffffff;
  --radius: 10px;
  --max: 1600px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 100px; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--gray);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1,h2,h3,h4{ color: var(--black); font-weight: 800; line-height: 1.15; margin: 0 0 16px; }
h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); text-transform: uppercase; letter-spacing: -0.5px; }
h2{ font-size: clamp(1.7rem, 3.5vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.3px; }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 16px; }
.accent{ color: var(--red); }
.section{ padding: 72px 0; }
.section--tight{ padding: 48px 0; }
.section--gray{ background: var(--gray-light); }
.section--black{ background: var(--black); color: #d8d8d8; }
.section--black h2, .section--black h3{ color: var(--white); }
.center{ text-align: center; }
.divider{ width: 64px; height: 4px; background: var(--red); border: none; margin: 0 0 24px; }
.divider.center{ margin-left:auto; margin-right:auto; }

/* Buttons */
.btn{
  display:inline-block; padding: 9px 20px; border-radius: 999px;
  background: var(--red); color: var(--white); font-weight: 700;
  text-decoration:none; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.78rem;
  border: 2px solid var(--red); transition: all .2s ease;
}
.btn:hover{ background: var(--red-dark); border-color: var(--red-dark); }
.btn--outline{ background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline:hover{ background: var(--black); color: var(--white); }
.btn--outline-white{ background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline-white:hover{ background: var(--white); color: var(--black); }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--white);
  border-bottom: 4px solid var(--red);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding-top:14px; padding-bottom:14px; }
.site-logo img{ height: 42px; width:auto; }
.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; align-items:center; }
.main-nav a{ text-decoration:none; font-weight:700; text-transform:uppercase; font-size:0.88rem; color: var(--black); letter-spacing:.3px; }
.main-nav a:hover{ color: var(--red); }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ font-weight:700; color:var(--black); text-decoration:none; font-size:0.95rem; white-space:nowrap; }
.header-phone .accent{ display:block; font-size:0.7rem; text-transform:uppercase; color: var(--gray); font-weight:600; }
.nav-toggle-input{ display:none; }
.nav-toggle{ display:none; }
.mobile-nav{ display:none; }

/* ===== Hero ===== */
.hero{ position:relative; overflow:hidden; background: var(--black); color: var(--white); }
.hero .wrap{ position:relative; z-index:2; padding: 90px 24px; max-width: 760px; }
.hero p.lead{ font-size:1.15rem; color:#cfcfcf; max-width:560px; }
.hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.hero-bg{
  position:absolute; inset:0; z-index:1; opacity:.18;
  background: radial-gradient(circle at 75% 30%, var(--red) 0%, transparent 55%);
}
.hero h1{ color: var(--white); }

/* ===== Feature / icon list ===== */
.icon-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-top:36px; }
.icon-item{ display:flex; gap:16px; align-items:flex-start; }
.icon-circle{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:2px solid var(--red);
  display:flex; align-items:center; justify-content:center; color: var(--red); font-size:1.3rem; font-weight:800;
}
.icon-item h4{ margin:0 0 4px; color:var(--black); font-size:1.02rem; font-weight:700; }
.icon-item p{ margin:0; font-size:0.94rem; }

/* ===== Bento feature grid (replaces plain icon-list rows) ===== */
.bento-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
  margin-top: 40px;
}
.bento-tile{
  background: var(--white);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bento-tile__icon{
  flex:0 0 auto;
  width:56px; height:56px; border-radius:16px;
  background: var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800;
}
.bento-tile h4{ margin:0; color:var(--black); font-size:1.1rem; font-weight:800; }
.bento-tile p{ margin:0; font-size:0.95rem; }

.bento-tile--wide{ grid-column: span 2; }
.bento-tile--full{
  grid-column: span 3;
  flex-direction:row; align-items:center; gap:26px;
  background: linear-gradient(135deg, rgba(227,30,36,.05), rgba(227,30,36,.01));
}
.bento-tile--full .bento-tile__icon{ width:66px; height:66px; font-size:1.7rem; flex:0 0 auto; }
.bento-tile--full > div:not(.bento-tile__icon){ flex:1; }

@media (max-width: 900px){
  .bento-grid{ grid-template-columns: 1fr; }
  .bento-tile--wide, .bento-tile--full{ grid-column: span 1; }
  .bento-tile--full{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ===== Cards / services grid ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:40px; }
.card{
  background: var(--white); border-radius: var(--radius); padding: 32px 26px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06); border-top: 4px solid var(--red);
}
.card h3{ margin-bottom:10px; }
.card p{ font-size:0.94rem; margin-bottom:0; }
.tag{ display:inline-block; font-size:0.78rem; font-weight:800; letter-spacing:.6px; color:var(--red); text-transform:uppercase; margin-bottom:10px; }

/* ===== Quote banner ===== */
.quote-banner{ background: var(--gray-light); border-left: 6px solid var(--red); padding: 28px 32px; }
.quote-banner p{ margin:0; font-size:1.1rem; color:var(--black); font-weight:600; }
.quote-banner .accent{ display:block; font-weight:800; }

/* ===== Partners strip ===== */
.partners{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:44px; margin-top:32px; }
.partners img{ height:38px; width:auto; filter: grayscale(100%); opacity:.75; transition:.2s; }
.partners img:hover{ filter:none; opacity:1; }

/* ===== CTA band ===== */
.cta-band{ background: var(--red); color: var(--white); text-align:center; padding: 40px 0; }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:#ffe3e3; max-width:560px; margin:0 auto 20px; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:flex-start; }
.contact-info .icon-item{ margin-bottom:22px; }
.contact-form label{ display:block; font-weight:700; font-size:0.85rem; color:var(--black); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:12px 14px; margin-bottom:18px; border:1px solid #ddd; border-radius:6px;
  font-family:var(--font); font-size:0.95rem; background:var(--white);
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form button{ border:none; cursor:pointer; }
.form-note{ font-size:0.82rem; color:var(--gray); margin-top:-8px; }
.form-success{ background:#e9f8ec; border-left:4px solid #2e9e4a; padding:16px 20px; border-radius:6px; margin-bottom:24px; }
.form-error{ background:#fdeceb; border-left:4px solid var(--red); padding:16px 20px; border-radius:6px; margin-bottom:24px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ===== Footer ===== */
.site-footer{ background: var(--black); color:#bdbdbd; }
.footer-top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; padding: 56px 0 36px; }
.footer-top h4{ color:var(--white); text-transform:uppercase; font-size:0.85rem; letter-spacing:.6px; margin-bottom:16px; }
.footer-top .site-logo img{ height:40px; margin-bottom:14px; }
.footer-top ul{ list-style:none; margin:0; padding:0; }
.footer-top li{ margin-bottom:10px; font-size:0.92rem; }
.footer-top a{ text-decoration:none; color:#bdbdbd; }
.footer-top a:hover{ color: var(--red); }
.social-links{ display:flex; gap:12px; margin-top:20px; }
.social-links a{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); color:#bdbdbd;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-links a:hover{ background: var(--red); color:var(--white); transform:translateY(-2px); }
.footer-bottom{ border-top:1px solid #2a2a2a; padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; }
.ricoh-badge{ display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; color:#9a9a9a; }

/* ===== Utility ===== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.mt-0{ margin-top:0; }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }

  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; cursor:pointer; flex:0 0 auto;
  }
  .nav-toggle span{ display:block; height:3px; background:var(--black); border-radius:2px; }

  .mobile-nav{
    display:block; max-height:0; overflow:hidden; background:var(--white);
    border-top:0 solid var(--red); transition: max-height .25s ease;
  }
  .mobile-nav ul{ list-style:none; margin:0; padding:0 24px; }
  .mobile-nav li{ border-bottom:1px solid #eee; }
  .mobile-nav a{
    display:block; padding:16px 0; text-decoration:none; font-weight:700;
    text-transform:uppercase; font-size:0.95rem; color:var(--black); letter-spacing:.3px;
  }
  .nav-toggle-input:checked ~ .mobile-nav{ max-height:400px; border-top-width:4px; }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-input:checked ~ .wrap .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}