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

:root {
    --red:    #e03030;
    --green:  #27ae60;
    --blue:   #1a73e8;
    --yellow: #f5a623;
    --dark:   #111827;
    --mid:    #374151;
    --light:  #6b7280;
    --bg:     #ffffff;
    --bg2:    #f9fafb;
    --border: #e5e7eb;
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--dark);
    background: var(--bg);
    overflow-x: hidden;
}

.logo-bars { display: flex; flex-direction: column; gap: 3px; }
.logo-bars span { display: block; height: 4px; border-radius: 2px; }
.logo-bars span:nth-child(1){ width:20px; background:var(--red); }
.logo-bars span:nth-child(2){ width:14px; background:var(--green); }
.logo-bars span:nth-child(3){ width:20px; background:var(--blue); }

/* Zoho Advanced Partner badge */
.zoho-badge {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 5px 10px; font-size: 10px; font-weight: 700;
    color: var(--mid); line-height: 1.3;
}
.z-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; width: 22px; height: 18px;
}
.z-grid span { border-radius: 2px; display: block; }
.z-grid span:nth-child(1){ background:var(--red); }
.z-grid span:nth-child(2){ background:var(--blue); }
.z-grid span:nth-child(3){ background:var(--yellow); }
.z-grid span:nth-child(4){ background:var(--green); }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
    text-decoration: none; font-size: 14px; font-weight: 600;
    color: var(--mid); transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.btn-contact {
    background: var(--blue); color: #fff;
    border: none; border-radius: 8px;
    padding: 10px 22px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: background .2s; white-space: nowrap;
}
.btn-contact:hover { background: #155bbf; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
    position: relative;
    padding: 60px 60px 44px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
}

/* Decorative outlined squares scattered in background */
.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco-sq {
    position: absolute;
    border-radius: 10px;
    border-width: 2.5px;
    border-style: solid;
    opacity: 0.5;
}
/* Top-centre area squares */
.ds1 { width:88px;  height:88px;  top:14px;   right:310px; border-color:var(--blue);   transform:rotate(12deg); }
.ds2 { width:56px;  height:56px;  top:8px;    right:258px; border-color:var(--yellow); transform:rotate(-6deg); }
/* Right-side squares (beside image) */
.ds3 { width:100px; height:100px; top:52px;   right:16px;  border-color:var(--blue);   transform:rotate(8deg);  border-radius:14px; }
.ds4 { width:64px;  height:64px;  top:44px;   right:60px;  border-color:var(--yellow); transform:rotate(-14deg); }
.ds5 { width:46px;  height:46px;  bottom:70px;right:8px;   border-color:var(--red);    transform:rotate(18deg); }
/* Left edge accent dots */
.dot-g { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--green); opacity:.7; top:52px; left:28px; }
.dot-y { position:absolute; width:9px;  height:9px;  border-radius:50%; background:var(--yellow);opacity:.6; top:110px;left:16px; }
/* Red corner bracket top-left */
.corner-bracket {
    position: absolute; top:54px; left:34px; pointer-events:none; z-index:0; width:26px; height:26px;
}
.corner-bracket::before {
    content:''; position:absolute; top:0; left:0;
    width:26px; height:3px; background:var(--red); border-radius:2px;
}
.corner-bracket::after {
    content:''; position:absolute; top:0; left:0;
    width:3px; height:26px; background:var(--red); border-radius:2px;
}

.hero-content { position: relative; z-index: 1; margin: auto; }

.tag-pill {
    display: inline-block;
    background: #e8f5e9; color: var(--green);
    font-size: 15px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; border-radius: 20px;
    padding: 4px 12px; margin-bottom: 16px;
}
.hero h1 {
    font-size: 100px; font-weight: 800; line-height: 1.08;
    color: var(--dark); margin-top: 0px; margin-bottom: 40px;
}
.hero h1 .hl { color: var(--blue); }

.title-bars { display: flex; gap: 13px; margin-top: 20px; margin-bottom: 20px; }
.title-bars span { display: block; height: 4px; border-radius: 2px; width: 60px; }
.title-bars span:nth-child(1){ background:var(--red);    }
.title-bars span:nth-child(2){ background:var(--green);  }
.title-bars span:nth-child(3){ background:var(--blue);   }
.title-bars span:nth-child(4){ background:var(--yellow); }

.hero p { font-size: 20px; color: var(--light); line-height: 1.75; max-width: 600px; }

.hero-image { position: relative; z-index: 1; }
.hero-image img {
    width: 100%; border-radius: 16px; object-fit: cover; display: block;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.img-ph {
    background: linear-gradient(135deg, #e4eaf4 0%, #cdd6e8 100%);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #a0aec0; font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
}
.hero-image .img-ph { aspect-ratio: 4/3; width: 90%; }

/* ═══════════════════════════════════════
   META STRIP  (calendar / people / star)
═══════════════════════════════════════ */
.meta-strip {
    display: flex; gap: 36px;
    padding: 36px 0px;
    background: #fff;
}
.meta-item { display: flex; align-items: center; gap: 12px; }

/* Square icon box */
.meta-icon-box {
    width: 42px; height: 42px;
    background: #f3f4f6; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.meta-icon-box svg { width: 22px; height: 22px; }

.meta-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.0; }
.meta-text span   { font-size: 12px; color: var(--light); }

/* ═══════════════════════════════════════
   SHARED SECTION TYPOGRAPHY
═══════════════════════════════════════ */
.sec-label {
    text-align: center; font-size: 15px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; color: var(--green);
    margin-bottom: 8px;
}
.sec-title {
    text-align: center; font-size: 40px; font-weight: 800; color: var(--dark);
    margin-bottom: 15px;
    margin-top: 15px;
}
.sec-sub {
    text-align: center; font-size: 16px; color: var(--light); line-height: 1.7;
    max-width: 800px; margin: 0 auto 40px;
}

/* ═══════════════════════════════════════
   SOLUTIONS GRID
═══════════════════════════════════════ */
.container-bordered{
    background-color: white;
    padding: 30px 50px 50px;
}

.border-outline{
    background: #fff !important;
    border: 1px solid var(--border);
    border-radius: 60px;
    padding: 60px;
}

.solutions { padding: 64px 60px; }

.solutions-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0px 60px;
}

.sol-card {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 30px 22px 24px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: box-shadow .25s, transform .25s;
    max-width: 350px;
}
.sol-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09); transform: translateY(-3px); }

/* Large centred circular icon container */
.sol-icon-wrap {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    flex-shrink: 0;
}
.sol-icon-wrap.green  { background: #e8f5e9; }
.sol-icon-wrap.blue   { background: #e8f0fe; }
.sol-icon-wrap.yellow { background: #fff8e1; }
.sol-icon-wrap.red    { background: #fce8e8; }
.sol-icon-wrap svg { width: 34px; height: 34px; }

.sol-card h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; color: var(--dark); }
.sol-card p  { font-size: 16px; color: var(--light); line-height: 1.65; flex: 1; margin-bottom: 20px; max-width: 300px; min-height: 66px; }

.learn-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: gap .2s;
}
.learn-link:hover { gap: 11px; }
.arrow-circle {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.learn-link.green  { color:var(--green);  } .learn-link.green  .arrow-circle { background:#e8f5e9; }
.learn-link.blue   { color:var(--blue);   } .learn-link.blue   .arrow-circle { background:#e8f0fe; }
.learn-link.yellow { color:var(--yellow); } .learn-link.yellow .arrow-circle { background:#fff8e1; }
.learn-link.red    { color:var(--red);    } .learn-link.red    .arrow-circle { background:#fce8e8; }

/* ═══════════════════════════════════════
   BOOTH EXPERIENCE
═══════════════════════════════════════ */
.booth {
    padding: 64px 60px;
    background: #fff;
    display: grid; grid-template-columns: 1fr 1.5fr;
    gap: 56px; align-items: center;
}
.booth-label {
    font-size: 15px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--green); margin-bottom: 12px;
}
.booth h2 { font-size: 40px; font-weight: 800; line-height: 1.22; color: var(--dark); margin-bottom: 12px; margin-top: 0px; }
.booth-desc { font-size: 20px; color: var(--light); line-height: 1.7; margin-bottom: 20px; }

/* Check list — circle with tick icon */
.check-list { list-style: none; margin-bottom: 28px; }
.check-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; color: var(--mid); margin-bottom: 10px; font-weight: 500;
}
.check-list li svg { flex-shrink: 0; }

.btn-gallery {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--dark); border-radius: 8px;
    padding: 10px 20px; font-size: 13px; font-weight: 700;
    color: var(--dark); background: #fff; cursor: pointer; text-decoration: none;
    transition: background .2s, color .2s;
}
.btn-gallery:hover { background: var(--dark); color: #fff; }
.btn-gallery svg { transition: stroke .2s; }
.btn-gallery:hover svg { stroke: #fff; }

/* 3-photo mosaic */
.booth-mosaic {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px; gap: 10px;
}
.mosaic-main { grid-column: 1; grid-row: 1 / 3; border-radius: 14px; overflow: hidden; }
.mosaic-side { border-radius: 14px; overflow: hidden; }
.mosaic-main img, .mosaic-side img,
.mosaic-main .img-ph2, .mosaic-side .img-ph2 {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-ph2 {
    background: linear-gradient(135deg,#e4eaf4,#cdd6e8);
    display: flex; align-items: center; justify-content: center;
    color: #a0aec0; font-size: 12px; font-weight: 600;
    width:100%; height:100%;
}

/* ═══════════════════════════════════════
   THANK YOU / STATS
═══════════════════════════════════════ */
.thankyou {
    background: var(--bg2); padding: 56px 60px;
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 22px; align-items: center;
    position: relative; overflow: hidden;
    max-width: 1580px; margin: auto; border-radius: 18px; border: 1px solid #e1e7f1;
}
/* Watercolour blob decorations (top-left corner) */
.ty-blob { position:absolute; border-radius:50%; pointer-events:none; }
.ty-b1 { width:88px; height:88px; background:var(--yellow); opacity:.15; top:-22px; left:-22px; }
.ty-b2 { width:56px; height:56px; background:var(--blue);   opacity:.12; bottom:8px; left:56px; }
.ty-b3 { width:14px; height:14px; background:var(--green);  opacity:.45; top:28px; left:88px; }
.ty-b4 { width:9px;  height:9px;  background:var(--red);    opacity:.45; top:58px; left:48px; }

.ty-intro { position:relative; z-index:1; }
.ty-intro .ty-tag {
    font-size: 15px; font-weight: 800; letter-spacing:.09em;
    text-transform: uppercase; color: var(--green); margin-bottom: 10px;
}
.ty-intro h2 { font-size: 34px; font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 10px; margin-top: 0px; }
.ty-intro p  { font-size: 15px; color: var(--light); line-height: 1.65; }

.stat-card {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 28px 16px; text-align: center; position: relative; z-index:1;
}
.stat-icon-wrap {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.stat-icon-wrap.green  { background:#e8f5e9; }
.stat-icon-wrap.blue   { background:#e8f0fe; }
.stat-icon-wrap.yellow { background:#fff8e1; }
.stat-icon-wrap svg { width:26px; height:26px; }

.stat-num { font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 5px; }
.stat-num.green  { color:var(--green);  }
.stat-num.blue   { color:var(--blue);   }
.stat-num.yellow { color:var(--yellow); }
.stat-label { font-size: 15px; color: var(--light); font-weight: 500; line-height:1.4; }

/* ═══════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════ */
.cta-banner {
    background: #f0f4fb; padding: 40px 60px;
    display: flex; align-items: center; gap: 28px;
    position: relative; overflow: hidden;
}
.cta-b { position:absolute; border-radius:50%; pointer-events:none; }
.cta-b1 { width:80px; height:80px; background:var(--blue);  opacity:.12; left:-28px; top:-28px; }
.cta-b2 { width:44px; height:44px; background:var(--red);   opacity:.12; left:18px;  bottom:-14px; }
.cta-b3 { width:16px; height:16px; background:var(--green); opacity:.35; left:80px;  bottom:18px; border-radius:50%; }

.cta-play {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--blue); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index:1;
    box-shadow: 0 6px 22px rgba(26,115,232,.38);
    transition: transform .2s, box-shadow .2s;
}
.cta-play:hover { transform: scale(1.07); box-shadow: 0 8px 28px rgba(26,115,232,.45); }

.cta-text { flex:1; position:relative; z-index:1; }
.cta-text h3 { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
.cta-text p  { font-size: 14px; color: var(--light); line-height: 1.65; }

.btn-demo {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--blue); color: #fff; border: none;
    border-radius: 8px; padding: 14px 24px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    position: relative; z-index:1;
    transition: background .2s;
}
.btn-demo:hover { background: #155bbf; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* Responsive */
@media (max-width: 960px) {
    nav { padding: 14px 20px; }
    .hero, .booth { gap: 20px !important; grid-template-columns: 1fr; padding: 40px 20px; }
    .solutions { padding: 40px 20px; }
    .solutions-grid { grid-template-columns: 1fr 1fr; padding: 0px !important;}
    .thankyou { grid-template-columns: 1fr 1fr; padding: 40px 20px; border: 0px; border-radius: 0px; }
    .cta-banner { flex-wrap: wrap; padding: 32px 20px; border: 0px; border-radius: 0px; margin-top: 0px; background: var(--bg2); }
    .meta-strip { flex-wrap: wrap; padding: 16px 20px; }
    .hero h1 {
        font-size: 52px !important;
    }
    .hero p { font-size: 16px !important; }
    .hero-image .img-ph { width: 100% !important; }
    .container-bordered{
        padding: 0 !important;
    }
    .border-outline {
        border: 0px !important;
        border-radius: 0px !important;
        padding: 0px !important;
    }
    .sol-card{
        text-align: left;
    }
    .sol-card h3 { font-size: 16px; }
    .sol-card p  { font-size: 14px; }
    .booth-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .mosaic-main {
        grid-column: 1 / 3;
        grid-row: 1;
        height: 220px;
    }
    .mosaic-side {
        grid-row: 2;
    }
    .mosaic-side {
        height: 140px;
    }
}