/*
 * Green Whale — WordPress Stylesheet
 * ============================================================
 * INSTALLATION:
 * 1. Upload this file to your WordPress theme folder:
 *    /wp-content/themes/your-theme/greenwhale-style.css
 *
 * 2. Add this to your theme's functions.php:
 *    wp_enqueue_style('greenwhale', get_template_directory_uri() . '/greenwhale-style.css');
 *
 * All classes prefixed "gw-" to avoid theme conflicts.
 * ============================================================
 */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --gw-navy:         #0B1F2E;
  --gw-green:        #2E7D32;
  --gw-green-mid:    #388E3C;
  --gw-green-accent: #43A047;
  --gw-green-light:  #E8F5E9;
  --gw-green-border: #A5D6A7;
  --gw-slate:        #455A64;
  --gw-mist:         #F4F7F4;
  --gw-white:        #FFFFFF;
  --gw-border:       rgba(11,31,46,0.10);
  --gw-radius:       12px;
  --gw-radius-sm:    8px;
  --gw-font-display: 'DM Serif Display', Georgia, serif;
  --gw-font-body:    'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
.gw-nav, .gw-hero, .gw-section, .gw-footer,
.gw-nav *, .gw-hero *, .gw-section *, .gw-footer * {
  box-sizing: border-box;
}

/* ============================================================
   LANGUAGE — default visibility
   ============================================================ */
[data-lang]          { display: none; }
[data-lang="en"]     { display: block; }
span[data-lang="en"] { display: inline; }
span[data-lang="zh"] { display: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.gw-hero h1,
.gw-section h2,
.gw-cloud-info h3,
.gw-contact-card h3 {
  font-family: var(--gw-font-display);
  color: var(--gw-navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.gw-hero h1         { font-size: clamp(32px, 3.6vw, 50px); }
.gw-section h2      { font-size: clamp(28px, 3vw, 38px); }
.gw-cloud-info h3   { font-size: 26px; margin-bottom: 12px; }
.gw-contact-card h3 { font-size: 22px; margin-bottom: 8px; }
.gw-hero h1 em,
.gw-section-dark h2 em { font-style: italic; color: var(--gw-green); }
.gw-section-dark h2 em { color: #81C784; }

.gw-service-card h3 { font-size: 15px; font-weight: 500; color: var(--gw-navy); margin-bottom: 8px; }
.gw-market-card h3  { font-size: 16px; font-weight: 500; color: var(--gw-navy); margin-bottom: 4px; }
.gw-step-content h3 { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.gw-cf h4,
.gw-cloud-feats h4  { font-size: 14px; font-weight: 500; color: var(--gw-navy); margin-bottom: 2px; }
.gw-av h4           { font-size: 13px; font-weight: 500; color: var(--gw-navy); margin-bottom: 4px; }
.gw-cloud-tile h4   { font-size: 13px; font-weight: 500; color: var(--gw-navy); margin-bottom: 4px; }

.gw-section-lead    { font-size: 16px; color: var(--gw-slate); max-width: 560px; line-height: 1.8; margin-bottom: 44px; }
.gw-hero-sub        { font-size: 16px; color: var(--gw-slate); line-height: 1.8; margin-bottom: 32px; max-width: 460px; }
.gw-cloud-info p    { font-size: 15px; color: var(--gw-slate); line-height: 1.8; margin-bottom: 20px; }
.gw-contact-card > p{ font-size: 14px; color: var(--gw-slate); margin-bottom: 20px; line-height: 1.7; }
.gw-about-left p    { font-size: 15px; color: var(--gw-slate); line-height: 1.8; margin-bottom: 16px; }
.gw-service-card p  { font-size: 13px; color: var(--gw-slate); line-height: 1.65; }
.gw-market-card p   { font-size: 13px; color: var(--gw-slate); line-height: 1.7; margin-bottom: 14px; }
.gw-step-content p  { font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.65; }
.gw-cloud-tile p    { font-size: 12px; color: var(--gw-slate); line-height: 1.55; }
.gw-cf p            { font-size: 13px; color: var(--gw-slate); line-height: 1.6; }
.gw-av p            { font-size: 12px; color: var(--gw-slate); margin: 0; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.gw-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gw-border);
  padding: 0 5%; display: flex; align-items: center; justify-content: space-between; height: 68px;
}
.gw-logo-link      { display: block; }
.gw-logo-img       { height: 44px; width: auto; display: block; }
.gw-nav-links      { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.gw-nav-links a    { font-family: var(--gw-font-body); font-size: 14px; color: var(--gw-slate); text-decoration: none; transition: color 0.2s; }
.gw-nav-links a:hover { color: var(--gw-green); }
.gw-nav-right      { display: flex; align-items: center; gap: 12px; }
.gw-nav-email      { font-family: var(--gw-font-body); font-size: 13px; color: var(--gw-slate); }

/* ============================================================
   LANGUAGE SWITCHER (nav)
   ============================================================ */
.gw-nav .gw-lang-switcher {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  height: 36px !important;
  background: #fff !important;
}
.gw-nav .gw-lang-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 12px !important;
  height: 36px !important;
  font-family: var(--gw-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gw-slate) !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.gw-nav .gw-lang-btn.active {
  background: var(--gw-green) !important;
  color: #fff !important;
}
.gw-nav .gw-lang-btn:hover:not(.active) {
  background: var(--gw-green-light) !important;
  color: var(--gw-green) !important;
}
.gw-lang-divider {
  width: 1px !important;
  height: 20px !important;
  background: var(--gw-border) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}
.gw-lang-flag { font-size: 14px !important; line-height: 1 !important; }

/* ============================================================
   LANGUAGE SWITCHER (footer)
   ============================================================ */
.gw-footer .gw-footer-lang {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--gw-radius-sm) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  height: 32px !important;
}
.gw-footer .gw-footer-lang-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 12px !important;
  height: 32px !important;
  font-family: var(--gw-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.gw-footer .gw-footer-lang-btn.active {
  background: var(--gw-green) !important;
  color: #fff !important;
}
.gw-footer .gw-footer-lang-btn:hover:not(.active) {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}
.gw-footer-lang-divider {
  width: 1px !important;
  height: 18px !important;
  background: rgba(255,255,255,0.2) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.gw-btn-primary {
  background: var(--gw-green); color: #fff; border: none;
  padding: 13px 24px; border-radius: var(--gw-radius-sm);
  font-family: var(--gw-font-body); font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background 0.2s; display: inline-block;
}
.gw-btn-primary:hover { background: var(--gw-green-mid); }
.gw-btn-outline {
  background: transparent; color: var(--gw-navy);
  border: 1.5px solid var(--gw-border); padding: 12px 24px;
  border-radius: var(--gw-radius-sm);
  font-family: var(--gw-font-body); font-size: 15px;
  cursor: pointer; transition: all 0.2s; display: inline-block;
}
.gw-btn-outline:hover { border-color: var(--gw-green); color: var(--gw-green); background: var(--gw-green-light); }

/* ============================================================
   HERO
   ============================================================ */
.gw-hero {
  padding: 88px 5% 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; max-width: 1200px; margin: 0 auto;
}
.gw-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gw-green-light); color: var(--gw-green);
  font-family: var(--gw-font-body); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 22px;
  letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid var(--gw-green-border);
}
.gw-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gw-green-accent); }
.gw-hero-btns   { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.gw-hero-trust  { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--gw-border); }
.gw-trust-label { font-family: var(--gw-font-body); font-size: 12px; color: var(--gw-slate); white-space: nowrap; }
.gw-trust-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.gw-badge {
  font-family: var(--gw-font-body); font-size: 11px; font-weight: 500;
  padding: 4px 12px; border-radius: 100px;
  background: var(--gw-green-light); color: var(--gw-green); border: 1px solid var(--gw-green-border);
}

/* Hero right panel */
.gw-hero-right  { display: flex; flex-direction: column; gap: 14px; }
.gw-hv-heading  { font-family: var(--gw-font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.7px; color: var(--gw-slate); }
.gw-cloud-map   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gw-cloud-tile  { background: var(--gw-mist); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 18px; transition: border-color 0.2s; }
.gw-cloud-tile:hover    { border-color: var(--gw-green-border); }
.gw-cloud-tile.gw-featured { background: var(--gw-green-light); border-color: var(--gw-green-border); }
.gw-ct-icon   { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 10px; }
.gw-ct-green  { background: var(--gw-green-light); }
.gw-ct-teal   { background: #E0F2F1; }
.gw-ct-blue   { background: #E3F2FD; }
.gw-ct-purple { background: #EDE7F6; }
.gw-market-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.gw-ms-flag   { background: var(--gw-mist); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-sm); padding: 9px 6px; text-align: center; }
.gw-flag      { font-size: 18px; display: block; margin-bottom: 3px; }
.gw-mname     { font-family: var(--gw-font-body); color: var(--gw-navy); font-weight: 500; display: block; font-size: 10px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.gw-section      { padding: 80px 5%; }
.gw-inner        { max-width: 1200px; margin: 0 auto; }
.gw-section-tag  { font-family: var(--gw-font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gw-green); margin-bottom: 10px; }
.gw-section-mist { background: var(--gw-mist); }
.gw-section-dark { background: var(--gw-navy); }
.gw-section-dark .gw-section-tag  { color: var(--gw-green-accent); }
.gw-section-dark h2                { color: #fff; }
.gw-section-dark .gw-section-lead { color: rgba(255,255,255,0.55); }

/* ============================================================
   SERVICES
   ============================================================ */
.gw-services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(256px,1fr)); gap: 16px; }
.gw-service-card {
  background: #fff; border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius); padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.gw-service-card:hover { border-color: var(--gw-green-border); transform: translateY(-2px); }
.gw-svc-icon  { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 17px; }
.gw-si-green  { background: var(--gw-green-light); }
.gw-si-teal   { background: #E0F2F1; }
.gw-si-blue   { background: #E3F2FD; }
.gw-si-purple { background: #EDE7F6; }
.gw-si-amber  { background: #FFF8E1; }
.gw-tags      { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.gw-stag      { font-family: var(--gw-font-body); font-size: 11px; padding: 3px 9px; border-radius: 100px; border: 1px solid var(--gw-border); color: var(--gw-slate); }
.gw-stag-green { background: var(--gw-green-light); border-color: var(--gw-green-border); color: var(--gw-green); }

/* ============================================================
   CLOUD TABS
   ============================================================ */
.gw-cloud-tabs { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
.gw-cloud-tab  {
  font-family: var(--gw-font-body); padding: 8px 18px; border-radius: 100px;
  border: 1px solid var(--gw-border); font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--gw-slate); background: #fff; transition: all 0.2s;
}
.gw-cloud-tab.active             { background: var(--gw-green); color: #fff; border-color: var(--gw-green); }
.gw-cloud-tab:hover:not(.active) { border-color: var(--gw-green-border); color: var(--gw-green); background: var(--gw-green-light); }
.gw-cloud-content        { display: none; }
.gw-cloud-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.gw-cloud-feats { display: flex; flex-direction: column; gap: 14px; }
.gw-cf          { display: flex; gap: 12px; align-items: flex-start; }
.gw-cf-dot      { width: 8px; height: 8px; border-radius: 50%; background: var(--gw-green-accent); margin-top: 6px; flex-shrink: 0; }

/* Cloud visual */
.gw-cloud-visual { background: var(--gw-mist); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 22px; }
.gw-cv-header    { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gw-border); }
.gw-sf-pill      { background: #0070D2; color: #fff; font-family: var(--gw-font-body); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 100px; }
.gw-cv-title     { font-family: var(--gw-font-body); font-size: 13px; font-weight: 500; color: var(--gw-navy); }
.gw-cv-steps     { display: flex; flex-direction: column; gap: 10px; }
.gw-cv-row       { display: flex; align-items: center; gap: 8px; }
.gw-cv-box       { flex: 1; background: #fff; border: 1px solid var(--gw-border); border-radius: var(--gw-radius-sm); padding: 9px 12px; }
.gw-cv-box strong { display: block; font-family: var(--gw-font-body); color: var(--gw-navy); font-weight: 500; font-size: 12px; }
.gw-cv-box span   { font-family: var(--gw-font-body); color: var(--gw-slate); font-size: 11px; }
.gw-cv-arrow      { color: var(--gw-green-accent); font-weight: 500; font-size: 14px; flex-shrink: 0; }
.gw-cv-outcome    { background: var(--gw-green-light); border: 1px solid var(--gw-green-border); border-radius: var(--gw-radius-sm); padding: 10px 12px; }
.gw-cv-outcome strong { font-family: var(--gw-font-body); color: var(--gw-green); font-weight: 500; display: block; font-size: 12px; }
.gw-cv-outcome span   { font-family: var(--gw-font-body); color: var(--gw-green-mid); font-size: 11px; }

/* ============================================================
   MARKETS
   ============================================================ */
.gw-markets-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gw-market-card      { border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 28px; background: #fff; transition: border-color 0.2s; }
.gw-market-card:hover { border-color: var(--gw-green-border); }
.gw-market-featured  { border-color: var(--gw-green-border); background: var(--gw-green-light); }
.gw-flags   { font-size: 22px; margin-bottom: 8px; }
.gw-mk-sub  { font-family: var(--gw-font-body); font-size: 13px; color: var(--gw-slate); margin-bottom: 14px; }
.gw-mk-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gw-mk-points li { font-family: var(--gw-font-body); font-size: 13px; color: var(--gw-navy); display: flex; gap: 8px; align-items: flex-start; }
.gw-mk-points li::before { content: '→'; color: var(--gw-green-accent); font-weight: 500; flex-shrink: 0; }

/* ============================================================
   PROCESS
   ============================================================ */
.gw-process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.gw-step-num      { font-family: var(--gw-font-display); font-size: 42px; color: rgba(255,255,255,0.07); margin-bottom: -6px; line-height: 1; }
.gw-step-content  { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--gw-radius); padding: 18px; }

/* ============================================================
   ABOUT + CONTACT
   ============================================================ */
.gw-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.gw-about-vals  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.gw-av          { background: #fff; border: 1px solid var(--gw-border); border-radius: var(--gw-radius-sm); padding: 14px; }
.gw-contact-card { background: #fff; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: 28px; }
.gw-contact-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--gw-font-body); font-size: 14px; color: var(--gw-navy); }
.gw-contact-row a { color: var(--gw-green); text-decoration: none; }
.gw-contact-row a:hover { text-decoration: underline; }
.gw-contact-icon { width: 32px; height: 32px; border-radius: var(--gw-radius-sm); background: var(--gw-green-light); border: 1px solid var(--gw-green-border); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.gw-social-row  { display: flex; gap: 10px; margin-top: 16px; margin-bottom: 20px; }
.gw-social-btn  { font-family: var(--gw-font-body); padding: 8px 16px; border-radius: var(--gw-radius-sm); border: 1px solid var(--gw-border); font-size: 13px; color: var(--gw-slate); text-decoration: none; transition: all 0.2s; display: inline-block; }
.gw-social-btn:hover { border-color: var(--gw-green-border); color: var(--gw-green); background: var(--gw-green-light); }

/* WPForms wrapper */
.gw-wpforms-wrapper { margin-top: 8px; }
.gw-wpforms-wrapper .wpforms-form input[type="text"],
.gw-wpforms-wrapper .wpforms-form input[type="email"],
.gw-wpforms-wrapper .wpforms-form textarea {
  border: 1px solid var(--gw-border) !important; border-radius: var(--gw-radius-sm) !important;
  font-family: var(--gw-font-body) !important; font-size: 14px !important;
  color: var(--gw-navy) !important; background: var(--gw-mist) !important; padding: 10px 14px !important;
}
.gw-wpforms-wrapper .wpforms-form input:focus,
.gw-wpforms-wrapper .wpforms-form textarea:focus { border-color: var(--gw-green-accent) !important; outline: none !important; }
.gw-wpforms-wrapper .wpforms-form button[type="submit"],
.gw-wpforms-wrapper .wpforms-form input[type="submit"] {
  background: var(--gw-green) !important; color: #fff !important; border: none !important;
  border-radius: var(--gw-radius-sm) !important; font-family: var(--gw-font-body) !important;
  font-size: 15px !important; font-weight: 500 !important; padding: 13px 24px !important;
  cursor: pointer !important; transition: background 0.2s !important;
}
.gw-wpforms-wrapper .wpforms-form button[type="submit"]:hover,
.gw-wpforms-wrapper .wpforms-form input[type="submit"]:hover { background: var(--gw-green-mid) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.gw-footer       { background: #071520; padding: 32px 5%; }
.gw-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.gw-footer-logo  { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: 0.75; }
.gw-footer-links { display: flex; gap: 20px; }
.gw-footer-links a { font-family: var(--gw-font-body); font-size: 13px; color: rgba(255,255,255,0.38); text-decoration: none; }
.gw-footer-links a:hover { color: rgba(255,255,255,0.7); }
.gw-footer-copy  { font-family: var(--gw-font-body); font-size: 12px; color: rgba(255,255,255,0.26); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .gw-hero                   { grid-template-columns: 1fr; padding: 56px 5% 48px; }
  .gw-cloud-content.active   { grid-template-columns: 1fr; }
  .gw-markets-grid           { grid-template-columns: 1fr; }
  .gw-about-inner            { grid-template-columns: 1fr; }
  .gw-process-steps          { grid-template-columns: 1fr 1fr; }
  .gw-nav-links              { display: none; }
  .gw-market-strip           { grid-template-columns: repeat(3,1fr); }
  .gw-nav-email              { display: none; }
}
@media (max-width: 600px) {
  .gw-process-steps  { grid-template-columns: 1fr; }
  .gw-about-vals     { grid-template-columns: 1fr; }
  .gw-hero-btns      { flex-direction: column; }
  .gw-cloud-map      { grid-template-columns: 1fr; }
  .gw-footer-inner   { flex-direction: column; text-align: center; }
}