/* 
   Custom Stylesheet for InboundPlace
   Add your new CSS here.
*/

/* --- GLOBAL LAYOUT VARIABLES --- */
:root {
   /* --- BRAND IDENTITY --- */
   --brand-primary: #ff004b;
   /* InboundPlace Pink (Buttons, Highlights) */
   --brand-secondary: #5056fc;
   /* InboundPlace Blue (Accents, Icons) */
   --brand-dark: #0f172a;
   /* Deep Navy (Backgrounds, Headings) */

   /* --- UTILITY COLORS --- */
   --text-body: #475569;
   /* Slate Grey (Paragraphs) */
   --bg-light: #f8fafc;
   /* Light Grey/Blue (Section Backgrounds) */
   --border-color: #e2e8f0;
   /* Light Borders */

   /* --- PLATFORM SPECIFIC --- */
   --hubspot-orange: #ff7a59;
   /* HubSpot Official Orange */

   /* --- STATUS COLORS --- */
   --success-green: #00c073;
   /* Success / "Good" State */
   --error-red: #ff4d4f;
   /* Error / "Bad" State */

   --font-main: "gotham", sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea,
.elementor-widget-heading .elementor-heading-title {
   font-family: var(--font-main) !important;
}

body {
   font-family: var(--font-main);
   color: var(--text-body);
}

/* --- REUSABLE TYPOGRAPHY --- */
.ip-headline-xl {
   font-size: 56px;
   line-height: 1.1;
   font-weight: 600;
   color: var(--brand-dark);
   letter-spacing: -1px;
   margin-bottom: 24px;
}

.ip-headline-lg {
   font-size: 38px;
   line-height: 1.2;
   font-weight: 600;
   color: var(--brand-dark);
   margin-bottom: 16px;
}

.ip-subhead {
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--brand-secondary);
   margin-bottom: 16px;
   display: block;
}

.ip-lead {
   font-size: 18px;
   line-height: 1.6;
   color: var(--text-body);
   font-weight: 400;
}

/* --- COMMON BUTTON STYLES --- */
.ip-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: var(--brand-primary);
   color: white;
   padding: 12px 32px;
   border-radius: 50px;
   font-weight: 600;
   text-decoration: none;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: none;
   cursor: pointer;
}

.ip-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 15px -3px rgba(255, 0, 75, 0.3), 0 4px 6px -2px rgba(255, 0, 75, 0.1);
   color: white;
}

/* --- STANDARD CONTAINER --- */
.ip-page-container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   width: 100%;
}

@media (max-width: 768px) {
   .ip-page-container {
      padding: 0 20px;
   }
}

/* --- LOGO --- */
.logo-img {
   max-width: 209px;
   height: auto;
}

/* --- TECH GRID --- */
.features-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(4, 140px);
   /* Fixed height rows */
   gap: 1px;
   background: #e5e7eb;
   /* Creates the border lines */
   border: 1px solid #e5e7eb;
   margin-top: 50px;

   /* Fade edges */
   -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
   mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}

/* --- SMALL ITEMS --- */
.feature-item {
   background: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 20px;
   transition: all 0.2s ease;
   position: relative;
   z-index: 1;
   cursor: pointer;

   /* Link Reset */
   text-decoration: none;
   color: inherit;
}

.feature-item:hover {
   background: #f8fafc;
   z-index: 5;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.feature-icon {
   width: 28px;
   height: 28px;
   color: #64748b;
   /* Slate-500 */
   transition: 0.2s;
}

.feature-item:hover .feature-icon {
   color: #0f172a;
   /* Slate-900 */
   transform: scale(1.1);
}

.feature-name {
   font-size: 13px;
   color: #475569;
   font-weight: 500;
   text-align: center;
}

.feature-item:hover .feature-name {
   color: #0f172a;
}

/* --- CENTER BLOCK (The "Showcase") --- */
.showcase {
   grid-column: 3 / 5;
   grid-row: 2 / 4;
   background: white;
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 0;
}

/* --- TECH CARD (Now Links) --- */
a.tech-card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 24px;
   overflow: hidden;
   transition: 0.2s;
   cursor: pointer;
   text-decoration: none;
   border: 0.5px solid rgba(0, 0, 0, 0.03);
}

a.tech-card:hover {
   z-index: 2;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transform: scale(1.01);
   /* Subtle pop effect */
}

.tech-logo {
   width: 36px;
   height: 36px;
   margin-bottom: 12px;
   object-fit: contain;
}

.tech-title {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 4px;
}

.tech-desc {
   font-size: 12px;
   opacity: 0.8;
   font-weight: 500;
}

/* Tech Themes */
.hs-theme {
   background: linear-gradient(135deg, #fff0e6 0%, #fff 100%);
   color: #ff5c35;
}

.wp-theme {
   background: linear-gradient(135deg, #f0f8ff 0%, #fff 100%);
   color: #21759b;
}

.shop-theme {
   background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
   color: #16a34a;
}

.react-theme {
   background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
   color: #0ea5e9;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
   .features-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(6, 140px);
   }

   .showcase {
      grid-column: 2 / 4;
      grid-row: 2 / 4;
   }
}

@media (max-width: 768px) {
   .features-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
   }

   .showcase {
      grid-column: 1 / 3;
      grid-row: auto;
      min-height: 400px;
   }

   .feature-item {
      padding: 24px 10px;
   }
}

/* Global Form Layout Fixes */
.ip-form-group.half br {
   display: none;
}

.ip-form-group br {
   display: none;
}