/*
Theme Name: Exura Cloud
Author: Palindu Dilsara
Description: Custom WordPress theme for landing page. Converted from static HTML/CSS design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* ===== Mona Sans (self-hosted, variable font) =====
   Files live in wp-content/themes/interact-ex-theme/fonts/
   Licensed under the SIL Open Font License — see fonts/LICENSE.txt */
@font-face{
  font-family:'Mona Sans Variable';
  src:url('fonts/Mona-Sans.woff2') format('woff2-variations'),
      url('fonts/Mona-Sans.woff2') format('woff2 supports variations'),
      url('fonts/Mona-Sans.woff') format('woff-variations'),
      url('fonts/Mona-Sans.woff') format('woff');
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mona Sans Variable';
  src:url('fonts/Mona-Sans-Italic.woff2') format('woff2-variations'),
      url('fonts/Mona-Sans-Italic.woff2') format('woff2 supports variations'),
      url('fonts/Mona-Sans-Italic.woff') format('woff-variations'),
      url('fonts/Mona-Sans-Italic.woff') format('woff');
  font-weight:200 900;
  font-style:italic;
  font-display:swap;
}
/* Non-variable-font-aware browsers fall back to 'Mona Sans' → system sans-serif,
   already set in the body{ font-family } rule below. */

:root{
  --plum-950:#071633;
  --plum-900:#3a1128;
  --plum-800:#1565C0;
  --cream:#d0e0f2;
  --cream-2:#d0e0f2;
  --accent:#1565C0;
  --ink:#221a1e;
  --ink-soft:#06132d;
  --line:#e7ddd0;
  --sage:#d0e0f2;
  --peach:#f0c9a0;
  --white:#ffffff;
  --radius:14px;
  --container:1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Mona Sans Variable','Mona Sans',system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ===== Shared container: locks content to 1200px ===== */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* ===== Announcement bar ===== */
.announce{
  background:var(--plum-950);
  color:#fff;
  text-align:center;
  font-size:13px;
  padding:10px 16px;
  letter-spacing:.2px;
  font-weight: 300;
}
.announce a{
  font-weight:600;
  margin-left:6px;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.announce a:hover{ border-color:var(--cream); }

/* ===== Header ===== */
header{
  position:relative;
  background:#e7eff8;
  border-bottom:1px solid var(--line);
  z-index:100;
}
.nav-wrap{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  gap:24px;
}
.logo{
  font-family:'Fraunces',serif;
  font-size:26px;
  font-weight:600;
  color:var(--plum-950);
  letter-spacing:-.5px;
  flex-shrink:0;
}
.primary-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:center;
}
.primary-nav ul{ display:flex; align-items:center; gap:6px; }
.nav-item{ position:static; }
.nav-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  font-size:15.5px;
  font-weight:500;
  color:#071633;
  border-radius:8px;
  transition:background .18s, color .18s;
}
.nav-trigger:hover, .nav-item.open .nav-trigger{ color:var(--accent); }

.caret{
  width:6px; height:6px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  margin-top:-2px;
  transition:transform .2s;
}
.nav-item.open .caret{ transform:rotate(-135deg); margin-top:3px; }

.cta-btn{
  background:var(--plum-950);
  color:#fff;
  padding:12px 24px;
  border-radius:100px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:background .2s, transform .2s;
  display:inline-block;
}
.cta-btn:hover{ background:var(--plum-800); transform:translateY(-1px); }

/* ===== Mega menu ===== */
.mega{
  position:absolute; top:100%; left:0; right:0; width:100%;
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 32px 56px -20px rgba(43,15,31,.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-item:hover .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.mega-inner{ max-width:1300px; margin:0 auto; padding:36px 32px 40px; }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 300px; gap:6px 32px; }
.mega-grid > div:not(.mega-promo){ padding-right:16px; border-right:1px solid var(--line); }
.mega-col-title{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:6px 10px 10px; }
.mega-link{ display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:10px; transition:background .15s; }
.mega-link:hover{ background:var(--cream); }
.mega-icon{ width:34px; height:34px; flex-shrink:0; border-radius:9px; background:var(--plum-950); display:flex; align-items:center; justify-content:center; color:#fff; }
.mega-icon svg{ width:17px; height:17px; }
.mega-text-title{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.mega-text-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.mega-promo{
  grid-column:4; grid-row:1 / span 5;
  background:var(--plum-950); border-radius:12px; padding:26px; color:var(--cream);
  display:flex; flex-direction:column; justify-content:space-between; min-height:100%;
}
.mega-promo-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--peach); font-weight:700; margin-bottom:10px; }
.mega-promo-title{ font-family:'Fraunces',serif; font-size:19px; line-height:1.25; margin-bottom:8px; }
.mega-promo-desc{ font-size:12.5px; color:rgba(250,246,239,.8); line-height:1.5; margin-bottom:16px; }
.mega-promo-link{ font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid rgba(250,246,239,.4); padding-bottom:2px; width:fit-content; }

/* =====================================================
   HERO
   Full-bleed background bands (2 halves), content locked
   to the 1200px container by splitting it into two 600px
   inner columns.
===================================================== */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr; /* full width halves */
  align-items:stretch;
}
.hero-left,
.hero-right{
  display:flex;
  min-height:600px;
}
.hero-left{ background:var(--cream); justify-content:flex-end; }
.hero-right{ background:var(--plum-950); justify-content:flex-start; }

/* inner content column: max 600px = half of 1200 container */
.hero-left-inner,
.hero-right-inner{
  width:100%;
  max-width:600px;
  padding:60px 20px 60px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-right-inner{
  align-items:center;
  position:relative;
  overflow:visible;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--plum-900); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--plum-900); }

h1{
  font-family:'Fraunces','Cormorant',serif;
  font-weight:600;
  font-size:44px;
  line-height:1.1;
  letter-spacing:-1px;
  color:var(--ink);
  max-width:560px;
}
h1 em{ font-style:italic; font-weight:600; color:var(--plum-950); }

.hero-sub{
  margin-top:26px;
  font-size:19px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:520px;
}
.hero-ctas{ margin-top:36px; display:flex; align-items:center; flex-wrap:wrap; }
.arrow-btn{
  width:48px; height:48px; border-radius:50%;
  background:var(--plum-950); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.arrow-btn:hover{ background:var(--plum-800); }


/* dashboard mockup image slot */
.mockup{ position:relative; width:100%; max-width:520px; }
.mockup img{ width:100%; border-radius:10px; }

/* ===== Logo strip ===== */
.logo-strip{
  padding:44px 0;
  overflow:hidden;
}
.logo-strip-track{
  display:flex;
  align-items:center;
  gap:56px;
  overflow-x:auto;
  scrollbar-width:none;
}
.logo-strip-track::-webkit-scrollbar{ display:none; }
.logo-strip-track img{ height:28px; width:auto; flex-shrink:0; opacity:.85; filter:grayscale(100%); }

/* ===== Intro copy above feature grid ===== */
.section-intro{ padding:20px 0 30px; max-width:900px; }
.section-intro h2{
  font-weight:400;
  font-size:36px;
  line-height:1.25;
  color:var(--ink);
  margin:18px 0px;
}
.section-intro p{ font-size:18px; line-height:1.6; color:var(--ink-soft); }
.section-intro p strong{ color:var(--ink); font-weight:600; }

/* ===== Feature grid ===== */
.features{ 
	padding-bottom:80px;
	background-color: #fff;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom: 16px;
  gap:16px;
}
.feature-card{
  background:var(--cream-2);
  border-radius:20px;
  padding:28px 20px 32px;
  display:flex;
  flex-direction:column;
}
.feature-card h3{ font-size:22px; font-weight:500; color:var(--ink); margin-bottom:22px; }
.feature-visual{
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-visual img{ width:100%; border-radius:10px; }
.feature-card p{ font-size:17px; line-height:1.25; color:var(--ink-soft); margin-top:auto; }

/* --- Card 1: toggle panel --- */
.promote-panel{ background:var(--white); border-radius:12px; box-shadow:0 16px 32px -16px rgba(43,15,31,.18); padding:18px; width:100%; }
.promote-panel-title{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.promote-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.promote-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--cream); border:1px solid var(--line); border-radius:100px; padding:8px 8px 8px 12px; font-size:12px; font-weight:500; color:var(--ink); }
.promote-item-label{ display:flex; align-items:center; gap:7px; }
.toggle{ width:30px; height:17px; border-radius:100px; background:var(--line); position:relative; flex-shrink:0; transition:background .2s; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--white); transition:left .2s; }
.toggle.on{ background:var(--plum-900); }
.toggle.on::after{ left:15px; }

/* --- Card 2: network graphic --- */
.network{ position:relative; width:100%; height:230px; }
.network-node{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:var(--peach); border-radius:100px; padding:7px 16px 7px 7px;
  box-shadow:0 10px 22px -10px rgba(43,15,31,.25);
}
.network-node .avatar{ width:32px; height:32px; border-radius:50%; background:var(--plum-800); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.network-node-name{ font-size:12.5px; font-weight:700; color:var(--plum-950); line-height:1.2; }
.network-node-role{ font-size:11px; color:var(--plum-900); opacity:.75; line-height:1.2; }
.node-1{ top:0; left:44%; }
.node-2{ top:92px; left:0; }
.node-3{ top:172px; left:36%; }

/* ===== CTA / toolkit banner ===== */
.toolkit{
  background:var(--sage);
  border-radius:24px;
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:90px;
}
.toolkit-visual img{ width:100%; border-radius:12px; }
.toolkit-copy h2{
  font-size:40px;
  line-height:1.25;
  font-weight:500;
  color:var(--ink);
  margin-bottom:16px;
}
.toolkit-copy p{ font-size:17px; line-height:1.5; color:var(--ink-soft); margin-bottom:24px; max-width:460px; }
.toolkit-form{ display:flex; flex-direction:column; gap:12px; max-width:460px; }
.toolkit-form .row{ display:flex; gap:12px; }
.toolkit-form input{
  width:100%;
  padding:13px 16px;
  border-radius:20px;
  border: none;
  background:var(--white);
  font-size:14px;
}
.toolkit-form button{
  background:var(--plum-950);
  color:var(--cream);
  padding:14px 24px;
  border-radius:100px;
  font-size:15px;
  font-weight:600;
  transition:background .2s;
}
.toolkit-form button:hover{ background:var(--plum-800); }

/* ===== Customer stories ===== */
.stories{ padding-bottom:90px; }
.stories .eyebrow{ margin-bottom:10px; }
.stories h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:32px;
  color:var(--ink);
  margin-bottom:36px;
}
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.story-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
}
.story-card .story-logo{ height:24px; width:auto; margin-bottom:24px; }
.story-card .stat{
  font-family:'Fraunces',serif;
  font-size:38px;
  font-weight:600;
  color:var(--plum-950);
  margin-bottom:10px;
}
.story-card h4{ font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.story-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* ===== Footer ===== */
.site-footer{ background:var(--plum-950); color:var(--cream); padding:60px 0 24px; }
.site-footer .footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.site-footer .logo{ color:var(--cream); margin-bottom:14px; }
.site-footer .footer-desc{ font-size:14px; color:rgba(250,246,239,.7); line-height:1.6; max-width:280px; }
.site-footer h4{ font-size:14px; font-weight:600; margin-bottom:16px; letter-spacing:.04em; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer a{ color:rgba(250,246,239,.75); font-size:14px; transition:color .2s; }
.site-footer a:hover{ color:var(--cream); }
.footer-bottom{ border-top:1px solid rgba(250,246,239,.15); padding-top:20px; font-size:13px; color:rgba(250,246,239,.6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ===== Mobile menu toggle ===== */
.mobile-toggle{ display:none; flex-direction:column; gap:5px; width:32px; padding:6px; }
.mobile-toggle span{ display:block; height:2px; width:100%; background:var(--plum-950); transition:transform .2s, opacity .2s; }
.mobile-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2){ opacity:0; }
.mobile-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1080px){
  .primary-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch;
    border-top:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(43,15,31,.2);
    padding:12px 16px 20px;
  }
  .primary-nav.open{ display:flex; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-item{ width:100%; }
  .nav-trigger{ width:100%; justify-content:space-between; }
  .mega{ position:static; box-shadow:none; border-top:none; opacity:1; visibility:visible; pointer-events:auto; transform:none; display:none; }
  .nav-item:hover .mega{ display:none; } /* disable hover mega on touch/tablet */
  .nav-item.open .mega{ display:block; }
  .mega-grid{ grid-template-columns:1fr; }
  .mega-grid > div:not(.mega-promo){ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:10px; margin-bottom:10px; }
  .mega-promo{ grid-column:1; grid-row:auto; min-height:auto; }
  .mobile-toggle{ display:flex; }

  .toolkit{ grid-template-columns:1fr; padding:32px; }
}

@media (max-width:960px){
  .feature-grid{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .site-footer .footer-cols{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-left, .hero-right{ min-height:auto; justify-content:center; }
  .hero-left-inner, .hero-right-inner{ max-width:100%; padding:48px 20px; align-items:stretch; }
  .hero-right-inner{ padding:40px 20px 56px; }
  h1{ max-width:100%; }
  .hero-sub{ max-width:100%; }
}

@media (max-width:640px){
  h1{ font-size:32px; }
  .hero-sub{ font-size:16.5px; }
  .nav-wrap{ padding:14px 16px; }
  .section-intro h2{ font-size:24px; }
  .section-intro p{ font-size:15.5px; }
  .stories h2{ font-size:24px; }
  .toolkit-copy h2{ font-size:23px; }
  .site-footer .footer-cols{ grid-template-columns:1fr; }
  .hero-ctas{ flex-wrap:wrap; }
  .toolkit-form .row{ flex-direction:column; }
  .badges img{ height:44px; }
}